React-router4路由监听的实现


Posted in Javascript onAugust 07, 2018

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组件中实时监听路由的变动了。

项目目录结构

React-router4路由监听的实现

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一切皆组件的特性和生命周期函数来监听路由变动

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript var变量隐式声明方法
Oct 19 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 #Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 #Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 #Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 #Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 #Javascript
深入浅析var,let,const的异同点
Aug 07 #Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 #Javascript
You might like
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
php intval的测试代码发现问题
2008/07/27 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
js的一些常用方法小结
2011/06/29 Javascript
Node.js编码规范
2014/07/14 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
深入理解js中this的用法
2016/05/28 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
python原始套接字编程示例分享
2014/02/21 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
python解析xml文件实例分析
2015/05/27 Python
python实现汉诺塔方法汇总
2016/07/25 Python
python实现八大排序算法(1)
2017/09/14 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
医院见习报告范文
2014/11/03 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书