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方法的回調函數執行，更新頁面。