react-router

Posted 2020-09-19 叮呤

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}`
}