react-路由器4

React Router4是一个完全由React重写的包。在当前版本中，不需要路由配置，一切都是组件。

问题的起点

最近，在一个新的H5项目中，使用了ReactRouter 4(' React-Router-DOM ' : ' 4 . 2 . 2 ')。项目中有些页面需要学生在app客户端使用，所以H5项目中的标题无法固定，需要显示对应页面的标题。因此，我们需要监控路线变化来更改标题。

思路

例如，在react中，父路由中有两条子路由，两条子路由的内容都属于父路由的一部分，因此通过切换子路由来显示不同的内容。在这种情况下，父组件中的生命周期功能组件将在切换子路由时被触发。按照这个思路，结合react-router 4中的一切都是一个组件的特点，我们可以用一个IndexPage组件来放置所有的主路由(其他多级路由可以放置在对应的主路由组件中)。当我们切换路由时，我们可以在这个IndexPage组件中实时监控路由的变化。

项目目录结构

src/app.js

.导出默认类App扩展Component { render(){ return(Router Route path='/' Component={ index page }//Router)} } src/pages/index . js

.导出默认类IndexPage扩展了componentDidMount(){ this . updatetitle(this . props)；} component will update(next props){ this . updatetitle(next props)；} updateTitle=(props)={ routes . foreach(route={ if(route . path===props . location . pathname){ document . title=route . title；}})} render () {return (div类名=' index-page '开关.项目级路由./Switch /div) }}在这个组件中，当路线发生变化时，我们可以实时监听并获取路线来更改标题

摘要

使用react-router 4所有组件的特性和生命周期功能来监控路由更改

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。