react-router实现机制

• 2019 年 12 月 4 日
• 笔记

本文作者：IMWeb 张颖 原文出处：IMWeb社区 未经同意，禁止转载

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方法的回调函数执行，更新页面。