阅读 3190

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

前言

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

vvv

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

参考

关注下面的标签,发现更多相似文章
评论