react-router实现机制

react-router使用方式

react-router是专为React设计的路由解决方案,以react component的方式提供API,包含常用的Router,Route,IndexRedirect,Link,browserHistory等。react-router充分利用react component提供的生命周期特性,使定义路由和开发react component体验一致。

嵌套的路由表

声明一份路径到各个component的映射表结构非常清晰:

<Provider store={store}>
    <Router history={browserHistory}>
      <Route path="/" component={AppSimple}>
        <Route path="/editor" component={Editor} />
        <IndexRedirect to="/proj" />
      </Route>  
    </Router>
</Provider>

而且支持多层嵌套

<Provider store={store}>
    <Router history={browserHistory}>
      <Route path="/" component={App} onEnter={auth}>
        <Route path="/proj" component={Proj} />
        <Route path="/user" component={User} />
        <Route path="/admin" component={AdminWrapper}>
          <Route path="/admin/proj" name="adminProj" component={Admin.Proj} />
          <Route path="/admin/container" component={Admin.Container} />
          <IndexRedirect to="/admin/proj" />
        </Route>
        <Route path="/help" component={Help} />
      </Route>
    </Router>
</Provider>
Link取代a元素

Link组件可以接收Router的状态,用于取代a元素,生成一个链接,允许用户点击后跳转到另一个路由。同时提供activeStyle或者activeClassName来定义链接触发样式。

<Link to={`/history?act_id=${record.act_id}`} activeClassName="active">查看历史版本</Link>
导航到路由页面browserHistory.push

除了使用Link组件做正常的用户点击跳转,在提交表单或者点击按钮有额外操作时,如何导航到路由页面呢?History API很方便:

browserHistory.push(`/tpl?proj_id=${key}`)

react-router实现机制

react-router依赖基础

react-router是基于history模块提供的api进行上层开发的:

  • historyModule中的路径更新机制是:historyModule.updateLocation() -> listener( );
  • Router对historyModule进行回调注入,所以路径更新机制变成:historyModule.updateLocation() -> Router.listen中的回调函数;
  • Router 在 react component 生命周期之组件被挂载前 componentWillMount 中使用 this.history.listen 去注册了 url 更新的回调函数,回调中触发react的setState方法来触发component render。
  • 回调中的match方法拿到当前的location,然后根据我们所声明的路由表来匹配对应的路由子集,然后更新路由状态值state,得到对应的component,从而触发render。
Link组件更新url的执行过程

react-router做了什么?

  • 实现的回调函数,含有能够更新react UI的setState方法。
  • 注册回调:在Router的componentWillMount中使用history.listen注册回调函数,此回调函数存放在history模块的回调函数数组changeListeners中。

Link点击后发生了什么?

  • Link组件组织浏览器的默认跳转行为,使用history模块的pushState方法触发url更新;
  • 然后执行updateLocation方法,触发history中的回调函数数组changeListeners执行;
  • 从而触发我们注册的含有能够更新react UI的setState方法的回调函数执行,更新页面。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

Log4j官方文档翻译(二、架构设计)

log4j遵循层次化架构,每个层都有不同的对象来执行不同的任务。这种层次话的结构灵活设计、易于未来的扩展。 log4j框架中有两种对象: 核心对象:框架的...

1655
来自专栏开源项目

Git 项目推荐 | Java 版按键精灵

快速开发工具类,用最简洁的命令实现想要的功能。辅助模拟开发。 纯Java,跨平台,模拟按键、鼠标点击、找图、找色,实现简单按键精灵的功能 DEMO演示 ! ...

34214
来自专栏Android干货园

[Android源码解析] 清空应用内部文件缓存

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/47...

691
来自专栏IMWeb前端团队

React16中的服务端渲染(译)

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 React 16发布了。 React 16有很多令人兴奋的新东...

6849
来自专栏大内老A

ASP.NET应用下基于SessionState的“状态编程框架”解决方案

在一个基于ASP.NET的Web应用程序中,我们通常使用SessionState保存基于某个客户端的状态信息。但是这种单纯使用SessionState的编程方式...

1789
来自专栏Java帮帮-微信公众号-技术文章全总结

day02.自动化部署高级命令文本【大数据教程】

day02.自动化部署高级命令文本 一、Iptables教程 1. iptables防火墙简介 Iptables也叫netfilter是Linux下自带的一款免...

3886
来自专栏沈唁志

实现微信小程序返回多级页面

2012
来自专栏about云

如何通过eclipse查看、阅读hadoop2.4源码

问题导读: 1.官网src包下载包,能否直接使用? 2.如何跟踪和查看hadoop源码? 此篇是从零教你如何获取hadoop2.4源码并使用eclips...

2904
来自专栏Google Dart

AngularDart4.0 英雄之旅-教程-02启动应用

码云项目页:https://gitee.com/scooplolwiki/toh-0

622
来自专栏IMWeb前端团队

使用JSON Schema来验证接口数据

最近在做一些关于JSON Schema的基建,JSON Schema可以描述一个JSON结构,那么反过来他也可以来验证一个JSON是否符合期望的格式,于是我想到...

2306

扫码关注云+社区