在單頁應用上，前端路由並不陌生。很多前端框架也會有獨立開發或推薦配套使用的路由系統。那麼，當我們在談前端路由的時候，還可以談些什麼？本文將簡要分析並實現一個的前端路由，並對 react-router 進行分析。

一個極簡前端路由實現

說一下前端路由實現的簡要原理，以 hash 形式（也可以使用 History API 來處理）為例，當 url 的 hash 發生變化時，觸發 hashchange 註冊的回撥，回撥中去進行不同的操作，進行不同的內容的展示。直接看程式碼或許更直觀。

JavaScript function Router() { this.routes = {}; this.currentUrl = ''; } Router.prototype.route = function(path, callback) { this.routes[path] = callback || function(){}; }; Router.prototype.refresh = function() { this.currentUrl = location.hash.slice(1) || '/'; this.routes[this.currentUrl](); }; Router.prototype.init = function() { window.addEventListener('load', this.refresh.bind(this), false); window.addEventListener('hashchange', this.refresh.bind(this), false); } window.Router = new Router(); window.Router.init();

1234567891011121314151617

functionRouter(){this.routes={};this.currentUrl='';}Router.prototype.route=function(path,callback){this.routes[path]=callback||function(){};};Router.prototype.refresh=function(){this.currentUrl=location.hash.slice(1)||'/';this.routes [this.currentUrl]();};Router.prototype.init=function(){window.addEventListener('load',this.refresh.bind(this),false);window.addEventListener('hashchange',this.refresh.bind(this),false);}window.Router=newRouter();window.Router.init();

上面路由系統 Router 物件實現，主要提供三個方法

• init 監聽瀏覽器 url hash 更新事件
• route 儲存路由更新時的回撥到回撥陣列routes中，回撥函式將負責對頁面的更新
• refresh 執行當前url對應的回撥函式，更新頁面

Router 呼叫方式以及呈現效果如下：點選觸發 url 的 hash 改變，並對應地更新內容（這裡為 body 背景色）

XHTML <ul> <li><a href="#/">turn white</a></li> <li><a href="#/blue">turn blue</a></li> <li><a href="#/green">turn green</a></li> </ul>

12345

<ul><li><a href="#/">turn white</a></li><li><a href="#/blue">turn blue</a></li><li><a href="#/green">turn green</a></li></ul>

JavaScript var content = document.querySelector('body'); // change Page anything function changeBgColor(color) { content.style.backgroundColor = color; } Router.route('/', function() { changeBgColor('white'); }); Router.route('/blue', function() { changeBgColor('blue'); }); Router.route('/green', function() { changeBgColor('green'); });

1234567891011121314

varcontent=document.querySelector('body');// change Page anythingfunctionchangeBgColor(color){content.style.backgroundColor=color;}Router.route('/',function(){changeBgColor('white');});Router.route('/blue',function(){changeBgColor('blue');});Router.route('/green',function(){changeBgColor('green');});

以上為一個前端路由的簡單實現，點選檢視完整程式碼，雖然簡單，但實際上很多路由系統的根基都立於此，其他路由系統主要是對自身使用的框架機制的進行配套及優化，如與 react 配套的 react-router。

react-router 分析

react-router 與 history 結合形式

react-router 是基於 history 模組提供的 api 進行開發的，結合的形式本文記為 包裝方式。所以在開始對其分析之前，先舉一個簡單的例子來說明如何進行物件的包裝。

可看到 historyModule 中含有機制：historyModule.updateLocation() -> listener( )，Router 通過對其進行包裝開發，針對 historyModule 的機制對 Router 也起到了作用，即historyModule.updateLocation() 將觸發 Router.listen 中的回撥函式 。點選檢視完整程式碼
這種包裝形式能夠充分利用原物件（historyModule ）的內部機制，減少開發成本，也更好的分離包裝函式（Router）的邏輯，減少對原物件的影響。

react-router 使用方式

react-router 以 react component 的元件方式提供 API， 包含 Router，Route，Redirect，Link 等等，這樣能夠充分利用 react component 提供的生命週期特性，同時也讓定義路由跟寫 react component 達到統一，如下

JavaScript render(( <Router history={browserHistory}> <Route path="/" component={App}> <Route path="about" component={About}/> <Route path="users" component={Users}> <Route path="/user/:userId" component={User}/> </Route> <Route path="*" component={NoMatch}/> </Route> </Router> ), document.body)

1234567891011

render((<Router history={browserHistory}><Route path="/"component={App}><Route path="about"component={About}/><Route path="users"component={Users}><Route path="/user/:userId"component={User}/></Route><Route path="*"component={NoMatch}/></Route></Router>),document.body)

就這樣，聲明瞭一份含有 path to component 的各個對映的路由表。
react-router 還提供的 Link 元件（如下），作為提供更新 url 的途徑，觸發 Link 後最終將通過如上面定義的路由表進行匹配，並拿到對應的 component 及 state 進行 render 渲染頁面。

XHTML <Link to={`/user/89757`}>'joey'</Link>

1	<Link to={`/user/89757`}>'joey'</Link>

從點選 Link 到 render 對應 component ，路由中發生了什麼

為何能夠觸發 render component ？

主要是因為觸發了 react setState 的方法從而能夠觸發 render component。
從頂層元件 Router 出發（下面程式碼從 react-router/Router 中摘取），可看到 Router 在 react component 生命週期之元件被掛載前 componentWillMount 中使用 this.history.listen 去註冊了 url 更新的回撥函式。回撥函式將在 url 更新時觸發，回撥中的 setState 起到 render 了新的 component 的作用。

JavaScript Router.prototype.componentWillMount = function componentWillMount() { // .. 省略其他 var createHistory = this.props.history; this.history = _useRoutes2['default'](createHistory)({ routes: _RouteUtils.createRoutes(routes || children), parseQueryString: parseQueryString, stringifyQuery: stringifyQuery }); this._unlisten = this.history.listen(function (error, state) { _this.setState(state, _this.props.onUpdate); }); };

1234567891011121314

Router.prototype.componentWillMount=functioncomponentWillMount(){// .. 省略其他varcreateHistory=this.props.history;this.history=_useRoutes2['default'](createHistory)({routes:_RouteUtils.createRoutes(routes||children),parseQueryString:parseQueryString,stringifyQuery:stringifyQuery});this._unlisten=this.history.listen(function(error,state){_this.setState(state,_this.props.onUpdate);});};

上面的 _useRoutes2 對 history 操作便是對其做一層包裝，所以呼叫的 this.history 實際為包裝以後的物件，該物件含有 _useRoutes2 中的 listen 方法，如下

JavaScript function listen(listener) { return history.listen(function (location) { // .. 省略其他 match(location, function (error, redirectLocation, nextState) { listener(null, nextState); }); }); }

12345678

functionlisten(listener){returnhistory.listen(function(location){// .. 省略其他match(location,function(error,redirectLocation,nextState){listener(null,nextState);});});}

可看到，上面程式碼中，主要分為兩部分
1. 使用了 history 模組的 listen 註冊了一個含有 setState 的回撥函式（這樣就能使用 history 模組中的機制）
2. 回撥中的 match 方法為 react-router 所特有，match 函式根據當前 location 以及前面寫的 Route 路由表匹配出對應的路由子集得到新的路由狀態值 state，具體實現可見 react-router/matchRoutes ，再根據 state 得到對應的 component ，最終執行了 match 中的回撥 listener(null, nextState) ，即執行了 Router 中的監聽回撥（setState），從而更新了展示。

以上，為起始註冊的監聽，及回撥的作用。

如何觸發監聽的回撥函式的執行？

這裡還得從如何更新 url 說起。一般來說，url 更新主要有兩種方式：簡單的 hash 更新或使用 history api 進行地址更新。在 react-router 中，其提供了 Link 元件，該元件能在 render 中使用，最終會表現為 a 標籤，並將 Link 中的各個引數組合放它的 href 屬性中。可以從 react-router/ Link 中看到，對該元件的點選事件進行了阻止了瀏覽器的預設跳轉行為，而改用 history 模組的 pushState 方法去觸發 url 更新。

JavaScript Link.prototype.render = function render() { // .. 省略其他 props.onClick = function (e) { return _this.handleClick(e); }; if (history) { // .. 省略其他 props.href = history.createHref(to, query); } return _react2['default'].createElement('a', props); }; Link.prototype.handleClick = function handleClick(event) { // .. 省略其他 event.preventDefault(); this.context.history.pushState(this.props.state, this.props.to, this.props.query); };

1234567891011121314151617

Link.prototype.render=functionrender(){// .. 省略其他props.onClick=function(e){return_this.handleClick(e);};if(history){// .. 省略其他props.href=history.createHref(to,query);}return_react2['default'].createElement('a',props);};Link.prototype.handleClick=functionhandleClick(event){// .. 省略其他event.preventDefault();this.context.history.pushState(this.props.state,this.props.to,this.props.query);};

對 history 模組的 pushState 方法對 url 的更新形式，同樣分為兩種，分別在 history/createBrowserHistory 及 history/createHashHistory 各自的 finishTransition 中，如 history/createBrowserHistory 中使用的是 window.history.replaceState(historyState, null, path); 而 history/createHashHistory 則使用 window.location.hash = url，呼叫哪個是根據我們一開始建立 history 的方式。

更新 url 的顯示是一部分，另一部分是根據 url 去更新展示，也就是觸發前面的監聽。這是在前面 finishTransition 更新 url 之後實現的，呼叫的是 history/createHistory 中的 updateLocation 方法，changeListeners 中為 history/createHistory 中的 listen 中所新增的，如下

JavaScript function updateLocation(newLocation) { // 示意程式碼 location = newLocation; changeListeners.forEach(function (listener) { listener(location); }); } function listen(listener) { // 示意程式碼 changeListeners.push(listener); }

1234567891011

functionupdateLocation(newLocation){// 示意程式碼location=newLocation;changeListeners.forEach(function(listener){listener(location);});}functionlisten(listener){// 示意程式碼changeListeners.push(listener);}

總結

可以將以上 react-router 的整個包裝閉環總結為

1. 回撥函式：含有能夠更新 react UI 的 react setState 方法。
2. 註冊回撥：在 Router componentWillMount 中使用 history.listen 註冊的回撥函式，最終放在 history 模組的 回撥函式陣列 changeListeners 中。
3. 觸發回撥：Link 點選觸發 history 中回撥函式陣列 changeListeners 的執行，從而觸發原來 listen 中的 setState 方法，更新了頁面

至於前進與後退的實現，是通過監聽 popstate 以及 hashchange 的事件，當前進或後退 url 更新時，觸發這兩個事件的回撥函式，回撥的執行方式 Link 大致相同，最終同樣更新了 UI ，這裡就不再說明。

react-router 主要是利用底層 history 模組的機制，通過結合 react 的架構機制做一層包裝，實際自身的內容並不多，但其包裝的思想筆者認為很值得學習，有興趣的建議閱讀下原始碼，相信會有其他收穫。