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 条评论
登录 后参与评论

相关文章

来自专栏小程序之家

如何在小程序中实现音频播放

在如何使用小程序媒体组件这篇文章中,我们介绍了小程序媒体组件的使用,但是对音频组件部分讲的不够详细,本文将对音频部分做些补充。

2670
来自专栏yukong的小专栏

vue后台管理之动态加载路由

我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制。同样的我们也需要实现一个这样的功能。 这篇文章我将主要讲vue端的实...

5032
来自专栏james大数据架构

MVC中局部视图的使用

加载部分视图 $("#result").load("/home/message",function(){ //加载完之后隐藏进度条 });  public Ac...

1847
来自专栏前端儿

React Router基础教程

然后就可以直接使用 ReactRouter 这个对象了,我们可能会使用到其中的几个属性

862
来自专栏一个会写诗的程序员的博客

h5中performance.timing轻松获取网页各个数据 如dom加载时间 渲染时长 加载完触发时间

在控制台中输入window.performance.timing(html5的属性);

1711
来自专栏有趣的django

CRM客户关系管理系统(五) 第五章、分页功能开发

2120
来自专栏Puppeteer学习

一步一步学习Vue(十一)

1472
来自专栏前端小作坊

GA源代码里的小技巧之preview和prerender

Safari浏览器有个Top site功能,它会展示最长访问的几个页面的截图。示例如下:

843
来自专栏salesforce零基础学习

salesforce零基础学习(七十四)apex:actionRegion以及apex:actionSupport浅谈

我们在开发中,很难会遇见不提交表单的情况。常用的apex:commandButton,apex:commandLink,apex:actionFunction,...

2337
来自专栏技术墨客

React前后端同构防止重复渲染 原

为了解决某些问题(比如SEO、提升渲染速度等)react 提供了2个方法在服务端生成一个HTML文本格式的字符串。在得到了这个HTML格式的字符串之后,通常会将...

641

扫码关注云+社区