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 实现TreeView CheckBox全选效果
Jan 11 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
js脚本实现数据去重
Nov 27 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
js实现星星打分效果
Jul 05 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 n个不重复的随机数生成代码
2009/06/23 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
python 剪切移动文件的实现代码
2018/08/02 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
大学军训感言400字
2014/03/11 职场文书
广告学专业求职信
2014/06/19 职场文书
会计专业自荐书
2014/07/08 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
2015年领班工作总结
2015/04/29 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
小组口号霸气押韵
2015/12/24 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
如何利用React实现图片识别App
2022/02/18 Javascript