React-router4路由监听的实现
更新时间：2018年08月07日 10:07:43 作者：qianq
这篇文章主要介绍了React-router4路由监听的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React-router 4
React Router4是一个纯React重写的包，现在的版本中已不需要路由配置，一切皆组件。
问题出发点
最近在一个新的H5项目中使用了react router 4 ("react-router-dom": "^4.2.2")，项目中的一部分页面是需要给app客户端的同学使用，这样H5项目中的title就不能一成不变，需要显示对应页面的title，所以，我们就需要去监听路由变动来更改title。
思路
在react中，例如：在父路由中有两个子路由，两个子路由组件的内容都属于父路由中的一部分，通过切换子路由来显示不同内容，这种情况下，父组件中的生命周期函数componentWillUpdate都会在切换子路由时被触发。按照这个思路结合react-router 4一切皆组件的特性，我们可以用一个IndexPage组件来放置所有的一级路由（其他多级路由就可以放到对应一级路由组件中），当我们切换路由是，就可以在这个IndexPage组件中实时监听路由的变动了。
项目目录结构
src/app.js
...
export default class App extends Component {
render() {
return (
<Router>
<Route path="/" component={IndexPage}/>
</Router>
)
}
}
src/pages/index.js
...
export default class IndexPage extends Component {
componentDidMount() {
this.updateTitle(this.props);
}
componentWillUpdate(nextProps) {
this.updateTitle(nextProps);
}
updateTitle = (props) => {
routes.forEach(route => {
if (route.path === props.location.pathname) {
document.title = route.title;
}
})
}
render() {
return (
<div className="index-page">
<Switch>
...
项目一级路由
...
</Switch>
</div>
)
}
}
在这个组件中，当路由变动，我们都能实时监听，获取路由来改变title
总结
利用react-router 4一切皆组件的特性和生命周期函数来监听路由变动
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于React Native自定义组件与输出方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
这篇文章主要介绍了React移动端项目之pdf预览问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
解析TypeError:import_react_native.AppState.removeEventListener
这篇文章主要为大家介绍了TypeError:import_react_native.AppState.removeEventListener is not a function问题解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要介绍了基于Webpack4和React hooks搭建项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
ES6 class类链式继承，实例化及react super(props)原理详解
这篇文章主要介绍了ES6 class类链式继承，实例化及react super(props)原理,结合实例形式详细分析了ES6 中class类链式继承，实例化及react super(props)原理相关概念、原理、定义与使用技巧,需要的朋友可以参考下2020-02-02
本篇文章主要介绍了在React 组件中使用Echarts的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了React如何通过@craco/craco代理接口问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本篇文章主要介绍了React Native日期时间选择组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了React中遍历数组生成标签问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了react之四种组件中DOM样式设置方式,通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-10-10
最新评论