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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
JS数组的赋值介绍
Mar 10 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
详解vue微信网页授权最终解决方案
Jun 16 Javascript
js实现头像上传并且可预览提交
Dec 25 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
PHP打印输出函数汇总
2016/08/28 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
js重写方法的简单实现
2016/07/10 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
python字符串中匹配数字的正则表达式
2019/07/03 Python
python交易记录整合交易类详解
2019/07/03 Python
pandas 层次化索引的实现方法
2019/07/06 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
UML设计模式笔试题
2014/06/07 面试题
聚美优品的广告词
2014/03/14 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
2015年统战工作总结
2015/05/19 职场文书
旅行社计调工作总结
2015/08/12 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android