React-Router 4 的新玩意兒

上一個項目用的還是 2.6.1，轉眼的功夫 4.0 都釋出了，API 變化實在有點大，2.X那套東西不頂用了，老老實實重新看一遍文檔，其中有幾點需要注意的，拿出來說一說。

本文隻讨論針對浏覽器的應用，使用 react-router-dom（在react-router基礎上封裝了一些進階元件）進行說明。

1. 關于BrowserRouter：

如果按照原來的使用方式，就掉進第一個坑裡了：history不合法。

用 react-router-dom 中的 <HashRouter>元件代替原來的 <Router> 元件就可以了。

這是之前2.X版本處理浏覽器路由的方式，4.0版本中推薦另一個元件：<BrowserRouter >

換上<BrowserRouter >之後會出現 2 個問題：

如果你不是通過伺服器啟動應用，因為chrome自身的安全機制，在本地環境下根本不能用chrome玩。這個不關鍵，我本地測試換個浏覽器還不行麼，本地起個伺服器也不麻煩。

關鍵問題，重新整理就是404。原因很簡單，BrowserRouter 和 HashRouter 完全不同，前者利用H5的 history 接口，前台路由就是背景收到的路由，你點到其他頁面一重新整理，得，根本沒這個檔案，伺服器也很無辜，到底讓我渲染個啥？背景也可以簡單的解決這個問題：甭管你請求的啥位址，我先把入口檔案扔給你。node處理方式如下（需要express）：

app.get('*',(request,response)=>{

  response.sendFile(path.resolve(__dirname,'../index.html'))

})      

啟動node伺服器，通過本機伺服器通路，完美解決上面兩個問題。

（<MemoryRouter> 和 <StaticRouter> 分别是非浏覽器環境和伺服器端渲染用的，在此不做讨論。）

1. BrowserRouter 裡可以存在各種标簽。

原來用慣了2.X的同志們，看到新文檔的例子可能會發現這個問題：Router裡邊不是隻能有Route麼，怎麼什麼都有。是的，4.0中 Router 裡可以存在各種标簽。

1. 導航連接配接<NavLink>：

看名字就是導航用的，主要用途就是區分激活的狀态，激活時的樣式。之前揉柔在Link裡的。

1. 隻渲染第一個比對的元件<Switch>：

一個路由可能同時比對多個路徑，在<Switch>中，隻渲染比對的第一個，其他的放棄。之前這是Router的預設行為，4.0中為什麼不預設了呢？答：可以将多個Route組合到頁面中。想一想，如果你就是想同時渲染多個元件而不隻是第一個呢？很欣慰看到我在2.X中吐槽的問題得到了解決。4.0版本給我最大的感覺就是：他讓浏覽器更靈活的去渲染頁面。

1. <Route>的渲染方法：

<Route component>

<Route render>

<Route children>

component和之前2.X的方法相同。

render可以傳個函數避免建立新的React element（内聯渲染時使用避免不必要的重載）。

children使用方式與render一緻，隻不過無論路由是否比對都會被渲染。

exact屬性為 true 則需要路由完全比對時才渲染元件（之前也是預設行為）。

1. 三個重要對象：history，location，match

在 Route component 中，以 this.props.location 的方式擷取，

在 Route render 中，以 ({ location }) => () 的方式擷取，

在 Route children 中，以 ({ location }) => () 的方式擷取，

History 和 match的擷取方式類似。