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自定义Hook的实现

    React自定义Hook的实现

    自定义Hook是一种自定义函数,它封装了React Hook的逻辑,并通过命名约定来使其可重用,本文主要介绍了React自定义Hook的实现,感兴趣的可以了解一下
    2023-11-11
  • React Hooks的useState、useRef使用小结

    React Hooks的useState、useRef使用小结

    React Hooks 是 React 16.8 版本引入的新特性,useState和useRef是两个常用的Hooks,本文主要介绍了React Hooks的useState、useRef使用,感兴趣的可以了解一下
    2024-01-01
  • React可定制黑暗模式切换开关组件

    React可定制黑暗模式切换开关组件

    这篇文章主要为大家介绍了React可定制黑暗模式切换开关组件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • React应用中使用Bootstrap的方法

    React应用中使用Bootstrap的方法

    本篇文章主要介绍了React应用中使用Bootstrap的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React hook实现简单的websocket封装方式

    React hook实现简单的websocket封装方式

    这篇文章主要介绍了React hook实现简单的websocket封装方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • react如何将字符串转义成html语句

    react如何将字符串转义成html语句

    这篇文章主要介绍了react如何将字符串转义成html语句问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue3中获取ref元素的几种方式总结

    vue3中获取ref元素的几种方式总结

    这篇文章主要介绍了vue3中获取ref元素的几种方式总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • React Hooks--useEffect代替常用生命周期函数方式

    React Hooks--useEffect代替常用生命周期函数方式

    这篇文章主要介绍了React Hooks--useEffect代替常用生命周期函数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 在React 组件中使用Echarts的示例代码

    在React 组件中使用Echarts的示例代码

    本篇文章主要介绍了在React 组件中使用Echarts的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • React中多语言的配置方式

    React中多语言的配置方式

    这篇文章主要介绍了React中多语言的配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06

最新评论