作者：Tyler
編譯：鬍子大哈翻譯原文：huziketang.com/blog/posts/…
英文原文：Build your own React Router v4)
轉載請註明出處，保留原文連結以及作者資訊
我還記得我第一次學習開發客戶端應用路由時的感覺，那時候我還是一個涉足在“單頁面應用”的未出世的小夥子，那會兒，要是說它沒把我的腦子弄的跟屎似的，那我是在撒謊。一開始的時候，我的感覺是我的應用程式程式碼和路由程式碼是兩個獨立且不同的體系，就像是兩個同父異母的兄弟，互相不喜歡但是又不得不在一起。
經過了一些年的努力，我終於有幸能夠教其他開發者關於路由的一些問題了。我發現，好像很多人對於這個問題的思考方式都和我當時很類似。我覺得有幾個原因。首先，路由問題確實很複雜，對於那些路由庫的開發者而言，找到一個合適的路由抽象概念來解釋這個問題就更加複雜。第二，正是由於路由的複雜性，這些路由庫的使用者傾向於只使用庫就好了，而不去弄懂到底背後是什麼原理。
本文中，我們會深入地來闡述這兩個問題。我們會通過建立一個簡單版本的 React Router v4 來解決第二個問題，而通過這個過程來闡釋第一個問題。也就是說通過我們自己構建 RRv4 來解釋 RRv4 是否是一個合適的路由抽象。
下面是將要用來測試我們所構建的 React Router 的程式碼。最終的程式碼例項你可以在這裡得到。
const Home = () => (
<h2>Home</h2>
)
const About = () => (
<h2>About</h2>
)
const Topic = ({ topicId }) => (
<h3>{topicId}</h3>
)
const Topics = ({ match }) => {
const items = [
{ name: 'Rendering with React', slug: 'rendering' },
{ name: 'Components', slug: 'components' },
{ name: 'Props v. State', slug: 'props-v-state' },
]
return (
<div>
<h2>Topics</h2>
<ul>
{items.map(({ name, slug }) => (
<li key={name}>
<Link to={`${match.url}/${slug}`}>{name}</Link>
</li>
))}
</ul>
{items.map(({ name, slug }) => (
<Route
key={name}
path={`${match.path}/${slug}`}
render={() => (
<Topic topicId={name} />
)} />
))}
<Route exact path={match.url} render={() => (
<h3>Please select a topic.</h3>
)}/>
</div>
)
}
const App = () => (
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics} />
</div>
)複製程式碼如果你還不熟悉 React Router v4，就先了解幾個基本問題。Route 用來渲染 UI，當一個 URL 匹配上了你所指定的路由路徑，就進行渲染。Link 提供了一個可以瀏覽訪問你 app 的方法。換句話講，Link 元件允許你更新你的 URL，而 Route 元件根據你所提供的新 URL 來改變 UI。
本文並不會手把手的教你 RRV4 的基礎，所以如果上面的程式碼你看起來很費勁的話，可以先來這裡看一下官方文件。把玩一下里面的例子，當你覺得順手了的時候，歡迎回來繼續閱讀。
如上段所說，路由給我們提供了兩個元件可以用於你的 app：Link 和 Route。我喜歡 React Router v4 的原因是它的 API “只是元件”而已，可以理解成沒有引入其他概念。這就是說如果你對 React 很熟悉的話，那麼你對元件以及怎麼組合元件一定有自己的理解，而這對於你寫路由程式碼依然適用。這就很方便了，因為已經熟悉瞭如何創造元件，那麼建立你自己的 React Router 就只是做你已經熟悉的事情——建立元件。
現在就來一起建立我們的 Route 元件。在上面的例子中，可以注意到 <Route> 使用了三個屬性：exact、path 和 component。他們的屬性型別（propTypes）對於 Route 元件來是這樣的：
static propTypes = {
exact: PropTypes.bool,
path: PropTypes.string,
component: PropTypes.func,
}複製程式碼這裡有些小細節。首先，path 並不需要，因為如果路由中沒有給 path 那麼將會自動渲染。第二，component 也不需要，是因為如果路徑匹配上了，有很多不同的方法來告訴 React Router 要渲染什麼 UI。其中一個上面沒有提到的方法就是使用 render 來通知 React Router，具體程式碼像這樣：
<Route path='/settings' render={({ match }) => {
return <Settings authed={isAuthed} match={match} />
}} />複製程式碼render 允許你建立一個直接返回 UI 的行內函數而不用建立額外的元件，所以我們也可以把它新增到 proTypes 中：
static propTypes = {
exact: PropTypes.bool,
path: PropTypes.string,
component: PropTypes.func,
render: PropTypes.func,
}複製程式碼現在我們知道了 Route 接收的屬性，我們來了解一下它們的具體功能。還記得上面說的：“當 URL 匹配上了你所指定的路由 path 以後，Route 渲染其對應的 UI”。基於這樣的定義，可以知道，<Route> 需要一些功能性函式，來判斷當前的 URL 是否匹配上了元件的 path 屬性。如果匹配上了，那麼返回渲染的 UI；如果沒有那麼什麼都不做並且返回 null。
一起來看一下這個匹配函式應該怎麼寫，暫且把它叫做 matchPath 吧。
class Route extends Component {
static propTypes = {
exact: PropTypes.bool,
path: PropTypes.string,
component: PropTypes.func,
render: PropTypes.func,
}
render () {
const {
path,
exact,
component,
render,
} = this.props
const match = matchPath(
location.pathname, // 全域性 DOM 變數
{ path, exact }
)
if (!match) {
// 什麼都不做，因為沒有匹配上 path 屬性
return null
}
if (component) {
// 如果當前地址匹配上了 path 屬性
// 以 component 建立新元素並且通過 match 傳遞
return React.createElement(component, { match })
}
if (render) {
// 如果匹配上了且 component 沒有定義
// 則呼叫 render 並以 match 作為引數
return render({ match })
}
return null
}
}複製程式碼上面的程式碼即實現了：如果匹配上了 path 屬性，就返回 UI，否則什麼也不做。
我們再來談一下路由的問題。在客戶端應用這邊，一般來講只有兩種方式更新 URL。一種是使用者點選 a 標籤，一種是點選後退/前進按鈕。基本上我們的路由只要關心 URL 的變化並且返回相應的 UI 即可。假設我們知道更新 URL 的方式只有上面兩種，那麼就可以針對這兩種情況做特殊處理了。稍後在構建 <Link> 元件的時候再詳細介紹 a 標籤的情況，這裡先討論後退/前進按鈕。 React Router 使用了 History工程裡的 .listen 方法來監聽當前 URL 的變化，為了避免再引入其他的庫，我們使用 HTML5 的 popstate 事件來實現這一功能。當使用者點選了後退/前進按鈕，popstate 就被觸發，我們需要的就是這個功能。因為 Route 渲染 UI 是根據當前 URL來做的，因此給 Route 配上監聽能力也是合理的，在 popstate 觸發的地方重新渲染 UI。就是說在觸發 popstate 時檢查是否匹配上了新的 URL，如果是則渲染 UI，如果不是，什麼也不做，下面看一下程式碼。
class Route extends Component {
static propTypes: {
path: PropTypes.string,
exact: PropTypes.bool,
component: PropTypes.func,
render: PropTypes.func,
}
componentWillMount() {
addEventListener("popstate", this.handlePop)
}
componentWillUnmount() {
removeEventListener("popstate", this.handlePop)
}
handlePop = () => {
this.forceUpdate()
}
render() {
const {
path,
exact,
component,
render,
} = this.props
const match = matchPath(location.pathname, { path, exact })
if (!match)
return null
if (component)
return React.createElement(component, { match })
if (render)
return render({ match })
return null
}
}複製程式碼這裡要注意的是我們只是加了一個 popstate 監聽，當 popstate 觸發的時候，呼叫 forceUpdate 來強制做重新渲染的判斷。
這樣就實現了所有的 <Route> 都會監聽，根據後退/前進按鈕來“重匹配”、“重判斷”和“重渲染”。
到現在，我們一直還沒有實現的是 matchPath 函式。這個函式在我們的 router 中是特別關鍵的，因為它是判斷當前 URL 是否匹配上了 <Route> 元件的關鍵點。matchPath 值得注意的一點是一定要把 <Route> 的 exact 考慮清楚。如果你對 exact 還不瞭解，看下下面這句話，給出了規範文件中的解釋：
只有當所給路徑精確匹配上
location.pathname時才返回 true。
接下來就來具體實現 matchPath 函式。如果你回頭看一下上面 Route 元件的程式碼，你可以看到 matchPath 函式是這樣的：
const match = matchPath(location.pathname, { path, exact })複製程式碼這裡的 match 要麼是物件，要麼是 null，這得取決於是否匹配上 path。根據這個宣告，我們來寫 matchPath 程式碼：
const matchPatch = (pathname, options) => {
const { exact = false, path } = options
}複製程式碼這裡使用 ES6 語法。上面的意思是，建立一個叫做 exact 的變數，使其等於 options.exact，並且如果非 null 的話則設定其為 false。同樣建立一個叫做 path 的變數，使其等於 options.path。
接下來就新增判斷是否匹配。React Router 使用 pathToRegex 來實現，只需要寫簡單的正則匹配就可以了。
const matchPatch = (pathname, options) => {
const { exact = false, path } = options
if (!path) {
return {
path: null,
url: pathname,
isExact: true,
}
}
const match = new RegExp(`^${path}`).exec(pathname)
}複製程式碼如果匹配上了，那麼返回一個包含有所有匹配串的陣列，否則返回 null。
下面是我們示例 app 的路由 '/topics/components' 的一些匹配項。
注意：每個
<Route>都在自己的渲染方法裡呼叫matchPath，所以要為每個<Route>配一個match。
現在我們要做的是新增判斷是否有匹配的程式碼：
const matchPatch = (pathname, options) => {
const { exact = false, path } = options
if (!path) {
return {
path: null,
url: pathname,
isExact: true,
}
}
const match = new RegExp(`^${path}`).exec(pathname)
if (!match) {
// 沒有匹配上
return null
}
const url = match[0]
const isExact = pathname === url
if (exact && !isExact) {
// 匹配上了，但是不是精確匹配
return null
}
return {
path,
url,
isExact,
}
}複製程式碼提示一下之前有講過的，對於使用者來講，有兩種方式更新 URL：通過後退/前進按鈕和通過點選 a 標籤。對於後退/前進點選來說，使用 popstate 事件給 Route 新增監聽就可以，現在來看一下如何通過 Link 解決 a 標籤問題。
Link 的 API 如下：
<Link to='/some-path' replace={false} />複製程式碼這裡 to 是一個 string 型別，指的是要連結到的地址。replace 是一個布林值，如果是 true，那麼點選連結將替換當前的實體到歷史堆疊，而不是新增一個新的進去。
新增這些 propTypes 到 Link 元件就得到：
class Link extends Component {
static propTypes = {
to: PropTypes.string.isRequired,
replace: PropTypes.bool,
}
}複製程式碼我們知道在 Link 元件中的渲染函式需要返回一個 a 標籤，但是我們不想每次變路由都進行一次全頁面重新整理，所以通過增加一個 onClick 處理程式來劫持 a 標籤。
class Link extends Component {
static propTypes = {
to: PropTypes.string.isRequired,
replace: PropTypes.bool,
}
handleClick = (event) => {
const { replace, to } = this.props
event.preventDefault()
// 這裡是路由
}
render() {
const { to, children} = this.props
return (
<a href={to} onClick={this.handleClick}>
{children}
</a>
)
}
}複製程式碼ok，程式碼寫到現在，就差更改當前 URL 了。在 React Router 是使用 History 工程裡面的 push 和 replace 方法。為了避免增加新依賴，這裡我使用 HTML5 的 pushState 和 replaceState。
本文中我們為了防止引入額外的依賴，一直也沒采用 History 庫。但是它對真實的 React Router 卻是至關重要的，因為它對不同的 session 管理和不同的瀏覽器環境進行了規範化處理。
pushState 和 replaceState 都接收三個引數。第一個引數是一個與歷史實體相關聯的物件，我們不需要，所以設定成一個空物件。第二個引數是標題，我們也不需要，所以也設定成空。第三個是我們需要使用的，指的是：相關 URL。
const historyPush = (path) => {
history.pushState({}, null, path)
}
const historyReplace = (path) => {
history.replaceState({}, null, path)
}複製程式碼在 Link 元件內部，會呼叫 historyPush 或者 historyReplace，依賴於前面提到的 replace 屬性。
class Link extends Component {
static propTypes = {
to: PropTypes.string.isRequired,
replace: PropTypes.bool,
}
handleClick = (event) => {
const { replace, to } = this.props
event.preventDefault()
replace ? historyReplace(to) : historyPush(to)
}
render() {
const { to, children} = this.props
return (
<a href={to} onClick={this.handleClick}>
{children}
</a>
)
}
}複製程式碼現在就只剩下最後一件很關鍵的問題了，如果你想把上面的例子用在自己的路由程式碼裡面，你需要注意這個問題。當你瀏覽時，URL 會發生改變，但是 UI 卻沒有重新整理，這是為什麼呢？這是因為，儘管你通過 historyReplace 或者 historyPush 改變了地址，但是 <Route> 並沒有意識到已經改變了，也不知道應該重匹配和重渲染。為了解決這個問題，需要跟蹤每一條 <Route> 並且當路由發生改變的時候呼叫 forceUpdate。
React Router 通過設定狀態、上下文和歷史資訊的組合來解決這個問題。監聽路由元件的內部程式碼。
為了使路由簡單，我們通過把所有路由物件放到一個陣列裡的方式來實現 <Route> 跟蹤。每當發生地址改變的時候，就遍歷一遍陣列，呼叫相應物件的 forceUpdate 函式。
let instances = []
const register = (comp) => instances.push(comp)
const unregister = (comp) => instances.splice(instances.indexOf(comp), 1)複製程式碼注意這裡建立了兩個函式。當 <Route> “裝配”上，就呼叫 register；當“解裝配”，就呼叫 unregister。然後只要呼叫 historyPush 或者 historyReplace（實際上使用者每次點選 <Link> 都會呼叫），就遍歷物件陣列，並呼叫 forceUpdate。
首先更新 <Route> 元件：
class Route extends Component {
static propTypes: {
path: PropTypes.string,
exact: PropTypes.bool,
component: PropTypes.func,
render: PropTypes.func,
}
componentWillMount() {
addEventListener("popstate", this.handlePop)
register(this)
}
componentWillUnmount() {
unregister(this)
removeEventListener("popstate", this.handlePop)
}
...
}複製程式碼再更新 historyPush 和 historyReplace：
const historyPush = (path) => {
history.pushState({}, null, path)
instances.forEach(instance => instance.forceUpdate())
}
const historyReplace = (path) => {
history.replaceState({}, null, path)
instances.forEach(instance => instance.forceUpdate())
}複製程式碼這時只要 <Link> 被點選並且地址發生變化，每個 <Route> 都會接收到訊息，並且進行重匹配和重渲染。
這就完成了所有的路由程式碼了，並且例項 app 用這些程式碼可以完美執行！
import React, { PropTypes, Component } from 'react'
let instances = []
const register = (comp) => instances.push(comp)
const unregister = (comp) => instances.splice(instances.indexOf(comp), 1)
const historyPush = (path) => {
history.pushState({}, null, path)
instances.forEach(instance => instance.forceUpdate())
}
const historyReplace = (path) => {
history.replaceState({}, null, path)
instances.forEach(instance => instance.forceUpdate())
}
const matchPath = (pathname, options) => {
const { exact = false, path } = options
if (!path) {
return {
path: null,
url: pathname,
isExact: true
}
}
const match = new RegExp(`^${path}`).exec(pathname)
if (!match)
return null
const url = match[0]
const isExact = pathname === url
if (exact && !isExact)
return null
return {
path,
url,
isExact,
}
}
class Route extends Component {
static propTypes: {
path: PropTypes.string,
exact: PropTypes.bool,
component: PropTypes.func,
render: PropTypes.func,
}
componentWillMount() {
addEventListener("popstate", this.handlePop)
register(this)
}
componentWillUnmount() {
unregister(this)
removeEventListener("popstate", this.handlePop)
}
handlePop = () => {
this.forceUpdate()
}
render() {
const {
path,
exact,
component,
render,
} = this.props
const match = matchPath(location.pathname, { path, exact })
if (!match)
return null
if (component)
return React.createElement(component, { match })
if (render)
return render({ match })
return null
}
}
class Link extends Component {
static propTypes = {
to: PropTypes.string.isRequired,
replace: PropTypes.bool,
}
handleClick = (event) => {
const { replace, to } = this.props
event.preventDefault()
replace ? historyReplace(to) : historyPush(to)
}
render() {
const { to, children} = this.props
return (
<a href={to} onClick={this.handleClick}>
{children}
</a>
)
}
}複製程式碼另外：React Router API 還自然派生出了 <Redirect> 元件。使用上面我們寫的程式碼，這個元件可以直接寫成：
class Redirect extends Component {
static defaultProps = {
push: false
}
static propTypes = {
to: PropTypes.string.isRequired,
push: PropTypes.bool.isRequired,
}
componentDidMount() {
const { to, push } = this.props
push ? historyPush(to) : historyReplace(to)
}
render() {
return null
}
}複製程式碼注意這個元件並不渲染任何 UI，它只用來做路由定向使用。
我希望這篇文章對你在認識 React Router 上有所啟發。我總跟我的朋友們講，React 會使你成為一個好的 JavaScript 程式設計師，而 React Router 會使你成為一個好的 React 程式設計師。因為一切皆為元件，你懂 React，你就懂 React Router。
我最近正在寫一本《React.js 小書》，對 React.js 感興趣的童鞋，歡迎指點。