首页 > 代码库 > react-router
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