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

相关文章

来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

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

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2712
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

3238
来自专栏落花落雨不落叶

canvas画简单电路图

80411
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

6836
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4355
来自专栏java 成神之路

使用 NIO 实现 echo 服务器

5407
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2955
来自专栏跟着阿笨一起玩NET

c#实现打印功能

3562
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

5188

扫码关注云+社区