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 相关文章推荐
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
JS中常用的消息框总结
Feb 24 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
JS中的一些常用的函数式编程术语
Jun 15 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 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
聊天室php&amp;mysql(六)
2006/10/09 PHP
Apache2 httpd.conf 中文版
2006/12/06 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
原生js二级联动效果
2017/06/20 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
使用tensorflow实现AlexNet
2017/11/20 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
python如何写try语句
2020/07/14 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
大学新生军训自我鉴定
2014/03/18 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang
Golang Web 框架Iris安装部署
2022/08/14 Python