前言

React Router v5.1.x中的新功能的介绍

useParams

useParams可以帮助我们。在各层组件中，轻松访问router的params参数。

<= V5.0

在V5.1版本之前，我们需要通过props.match获取路由参数。对于更深层的组件还需要使用高阶组件withRouter。


const Detail = (props) => {
  const { match: { params } } = props
  const { id } = params
  return (
    <div>
      params id: { id }
      <DetailTips/>
    </div>
  )
}
// 需要使用高阶组件withRouter
const DetailTips = withRouter((props) => {
  const { match: { params } } = props
  const { id } = params
  return (
    <div>params id: { id }</div>
  )
})
function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/detail/:id" component={Detail}/>
        </Switch>
      </Router>
    </div>
  );
}

V5.1

在V5.1版本中，由于useParams的引入，我们可以轻松获取路由参数。对于更深层的组件，也不需要借助高阶组件withRouter，帮助我们拿到路由参数。

const Detail = () => {
  const { id } = useParams()
  return (
    <div>
      params id: { id }
      <DetailTips/>
    </div>
  )
}
// 不需要使用高阶组件withRouter
const DetailTips = () => {
  const { id } = useParams()
  return (
    <div>params id: { id }</div>
  )
}
function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/detail/:id" component={Detail}/>
        </Switch>
      </Router>
    </div>
  )
}

useLocation

useLocation可以帮助我们。在各层组件中，轻松获取location对象。在V5.1版本之前，我们需要使用props.location。而对于更深层的组件，还需要使用withRouter。

<= V5.0

const Detail = (props) => {
  const { location: { pathname } } = props
  return (
    <div>
      pathname: { pathname }
      <DetailTips/>
    </div>
  )
}
// 需要使用高阶组件withRouter
const DetailTips = withRouter((props) => {
  const { location: { pathname } } = props
  return (
    <div>pathname: { pathname }</div>
  )
})
function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/detail/:id" component={Detail}/>
        </Switch>
      </Router>
    </div>
  );
}

V5.1

const Detail = (props) => {
  const { pathname } = useLocation()
  return (
    <div>
      pathname: { pathname }
      <DetailTips/>
    </div>
  )
}
// 不需要使用高阶组件withRouter
const DetailTips = (props) => {
  const { pathname } = useLocation()
  return (
    <div>pathname: { pathname }</div>
  )
}
function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/detail/:id" component={Detail}/>
        </Switch>
      </Router>
    </div>
  );
}

useHistory

useHistory可以帮助我们访问history对象，进行编程式的导航。

const Home = () => {
  return (
    <div>Home</div>
  )
}
const Detail = () => {
  const history = useHistory()
  return (
    <div>
      <button onClick={() => { history.push('/')}}>go home</button>
    </div>
  )
}
function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route path="/detail/:id" component={Detail}/>
        </Switch>
      </Router>
    </div>
  );
}

useRouteMatch

useRouteMatch，接受一个path字符串作为参数。当参数的path与当前的路径相匹配时，useRouteMatch会返回match对象，否则返回null。

useRouteMatch在对于一些，不是路由级别的组件。但是组件自身的显隐却和当前路径相关的组件时，非常有用。

比如，你在做一个后台管理系统时，网页的Header只会在登录页显示，登录完成后不需要显示，这种场景下就可以用到useRouteMatch。

<= V5.0

const Home = () => {
  return (
    <div>Home</div>
  )
}
// Header组件只会在匹配`/detail/:id`时出现
const Header = () => {
  return (
    <Route
      path="/detail/:id"
      strict
      sensitive
      render={({ match }) => {
        return match && <div>Header</div>
      }}
    />
  )
}
const Detail = () => {
  return (
    <div>Detail</div>
  )
}
function App() {
  return (
    <div className="App">
      <Router>
        <Header/>
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route exact path="/detail/:id" component={Detail}/> 
        </Switch>
      </Router>
    </div>
  );
}

V5.1

const Home = () => {
  return (
    <div>Home</div>
  )
}
// Header组件只会在匹配`/detail/:id`时出现
const Header = () => {
  // 只有当前路径匹配`/detail/:id`时，match不为null
  const match = useRouteMatch('/detail/:id')
  return (
    match && <div>Header</div>
  )
}
const Detail = () => {
  return (
    <div>Detail</div>
  )
}
function App() {
  return (
    <div className="App">
      <Router>
        <Header/>
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route exact path="/detail/:id" component={Detail}/> 
        </Switch>
      </Router>
    </div>
  );
}

其他

Link和NavLink组件的`to`属性支持函数


function App() {
  return (
    <div className="App">
      <Router>
        {/* 函数的返回值等于Link的to跳转的位置 */}
        <Link to={
          (location) => {
            return `${location.pathname}?sort=age`
          }
        }>go</Link>
      </Router>
    </div>
  );
}

参考