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

前言

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>
  );
}
复制代码

参考

• Hooks Introduced in React-Router v5.1
• REACT ROUTER DOC