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> 分別是非瀏覽器環境和服務器端渲染用的，在此不作討論。）

2. BrowserRouter 裏能夠存在各類標籤。

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

3. 導航鏈接<NavLink>：

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

4. 只渲染第一個匹配的組件<Switch>：

一個路由可能同時匹配多個路徑，在<Switch>中，只渲染匹配的第一個，其餘的放棄。以前這是Router的默認行爲，4.0中爲何不默認了呢？答：能夠將多個Route組合到頁面中。想想，若是你就是想同時渲染多個組件而不僅是第一個呢？很欣慰看到我在2.X中吐槽的問題獲得瞭解決。4.0版本給我最大的感受就是：他讓瀏覽器更靈活的去渲染頁面。

5. <Route>的渲染方法：

<Route component>

<Route render>

<Route children>

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

render能夠傳個函數避免建立新的React element（內聯渲染時使用避免沒必要要的重載）。

children使用方式與render一致，只不過不管路由是否匹配都會被渲染。

exact屬性爲 true 則須要路由徹底匹配時才渲染組件（以前也是默認行爲）。

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

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

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

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

History 和 match的獲取方式相似。