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 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
微信小程序开发常见问题及解决方案
Jul 11 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
使用php4加速网络传输
2006/10/09 PHP
PHP学习笔记之二
2011/01/17 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
python基础教程之字典操作详解
2014/03/25 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Python切片工具pillow用法示例
2018/03/30 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
python学生管理系统
2019/01/30 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
python实现发送邮件
2021/03/02 Python
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
高中自我评价范文
2014/01/27 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
老人与海读书笔记
2015/06/26 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书