张颖

6 个月前
  • 1198

    浏览
  • 0

    评论
  • 0

    收藏

react-router实现机制

本文作者: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组件可以接收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。

react-router做了什么?

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

Link点击后发生了什么?

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

    您需要 注册 一个IMWeb账号或者 才能进行评论。