hooks

使用 Hooks 或 props 中拿到路由对象

主要路由配置

Main.jsx

import { HashRouter, Link, Route, Switch } from "react-router-dom"
import FunctionalComponent from "./functionalComponent"
import ClassComponent from "./classComponent"

export default function Main() {
  return (
    // 不管是函数组件还是类组件，必须要在HashRouter或BrowserRouter中才能拿到路由相关对象
    <HashRouter>
      <div>
        <Link to="/fc1_0">FunctionalComponent0_1</Link>
        &nbsp;
        <Link to="/fc1_1">FunctionalComponent1_1</Link>
        &nbsp;
        <Link to="/cc1_1">classComponent1_0</Link>
      </div>
      <div>
        <Switch>
          {/* 不管是函数组件还是类组件，在Route中直接拿到路由相关对象 */}
          <Route path="/fc1_0" component={FunctionalComponent} />
          {/* 通过render方式渲染的要将props传递给组件 */}
          <Route
            path="/fc1_1"
            render={(props) => {
              return <FunctionalComponent {...props} />
            }}
          />
          <Route path="/cc1_1" component={ClassComponent} />
        </Switch>

        {/* 如果函数组件不是Route渲染的;使用hook可以拿到路由相关对象，props是拿不到的 */}
        <FunctionalComponent />
        {/* 函数组件不在Route中，需要使用HOC */}
        <ClassComponent />
      </div>
    </HashRouter>
  )
}

如何在函数组件中获取路由对象

FunctionalComponent.jsx

import { useLocation, useHistory, useRouteMatch } from "react-router-dom"
export default function FunctionalComponent(props) {
  // 1. 通过<Route component={Sub1} .../>配置的路由，直接通过props拿到
  let { history, location, match } = props
  console.log(history)
  console.log(location)
  console.log(match)

  // 2. 函数组件中也可以使用hooks
  let _history = useHistory()
  let _location = useLocation()
  let _match = useRouteMatch()
  console.log(_history)
  console.log(_location)
  console.log(_match)

  return <>FunctionalComponent</>
}

如何在类组件中获取路由对象

ClassComponent.jsx

import React from "react"
import { useLocation, useHistory, useRouteMatch } from "react-router-dom"
// Router Ver5版本中，直接使用withRouter
// import { withRouter } from "react-router-dom"
class ClassComponent extends React.Component {
  render() {
    // 如果类组件放在Route中，是可以直接拿到路由相关对象的
    let { history, location, match } = this.props
    console.log(history)
    console.log(location)
    console.log(match)

    return <>Class Component</>
  }
}

// 如果类组件不在Route修饰中，那需要使用高阶组件+hooks，拿到路由相关对象
const HOC = (Component) => {
  return function HOC(props) {
    let history = useHistory()
    let location = useLocation()
    let match = useRouteMatch()
    return (
      <Component
        {...props}
        history={history}
        location={location}
        match={match}
      />
    )
  }
}
export default HOC(ClassComponent)
// Router Ver5版本中，直接使用withRouter，等同于高阶组件
// export default withRouter(ClassComponent)