react-router

Posted 叮呤

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-router相关的知识,希望对你有一定的参考价值。

Route,hashHistory,Route

  IndexRoute即处理页面初始进入时候的组件展示,等路由切换的时候,再根据其他路由规则进行组件的切换展示

Link

  react-router提供的导航组件,可以直接使用进行路由切换,相当于a标签

browserHistory

  使用browserHistory的时候,浏览器中导航栏的url就不会出现_k的hash键值对,实际项目中一般用browserHistory。这样正常点击路由切换没有问题,但是重新刷新url就会报找不到路由,这个时候我们在webpack-dev-server启动的时候需要加上参数--history-api-fallback,也可以在webpack配置中设置historyApiFallback为true

activeStyle,activeClassName

  当前路由被点击处于触发显示状态的时候,我们可以使用activeStyle来给路由设置一些颜色

路由变量

  常规的路由,路由中的规则是给定的,我们可以尝试使用路由变量,在组件中获取这个路由的变量,并做相应的组件展示

  如<Route path=‘/(:message)‘ component={message}/>,在message组件中,可以通过this.props.params.message获取到这个变量的值。

Route中components参数的高级用法

  Route中components中接收的参数不仅仅只是实际的组件,还可以是对象,通过这样的用法,我们可以更灵活的控制组件的展示。

  如:<IndexRoute components={{header:HomeHeader,body:HomeBody}}/>使用的时候,直接用{props.header},{props.body}获取就可以了。

使用query获取url中的参数

  可以将url中访问的参数获取,并且应用到组件中。props.location.query.message 拿到?message=‘value‘的值

  还可以在Link组件中设置pathname和query变量

  如:<Link to={{pathname:"/",query:{message:‘fengmin‘}}}

rediect重定向

  <Redirect from="/contact" to="/contact-us"/>

setRouteLeaveHook

路由钩子函数,处理路由切换时的操作

 

componentWillMount(){
  this.context.router.setRouteLeaveHook(
       this.props.route,
       this.routerWillLeave
  )  
}
routerWillLeave(nextLocation){
    return `页面即将从home跳转到${nextLocation.pathname}`
}    

 

 

 

 

以上是关于react-router的主要内容,如果未能解决你的问题,请参考以下文章

React-Router学习

使用 webpack 和 react-router 进行延迟加载和代码拆分不加载

如何使此代码与 react-router v6 兼容

react-router 学习笔记

react-router 4实现代码分割(code spliting)

React-Router如何防止重定向