本文主要是了解下
react-router
新版本一些理念，為我們以後的開發注入一些感性認知。
react router
目前最新的版本是v5.1.2。
此版本沒有重大更改。如果已經在使用4.x版本，則可以在零代碼更改的情況下立即使用版本5。v5中最顯着的改進是對React 16的全面支援，同時保持了與React> = 15的完全相容性。
@Michael Jackson - react router 主要作者
從
v4
開始，相較于之前的版本有很大的變化，
react
徹底将“Just Component ” 一切皆元件的理念貫徹到底，是以開發方式也發生了極大的變化，從思維上要有所轉換。
可能你已經用慣了
v3
的開發方式，一時難以轉變，但是任何新事物的誕生必然有他的理由，當我用過
v5
之後，不得不說真的很友善,變得更簡單，更靈活。
下面簡單的說下從
v4
開始的一些重大的改進
分包
v4
之前隻有一個庫
react-router
。
從
v4
開始分為了兩個庫
-
react-router
-
react-router-dom
DOM
當然還有
react-router-native
這可以了解成在架構上做了一些調整，通用的和平台無關的能力放在一個庫，和平台耦的相關能力放在了一個庫，這和我們平時的開發中代碼優化差不多。
react
最開始也隻有一個庫。後來拆分開來
react
和
react-dom
還有
react-native
。
是以在使用的時候隻需要安裝
react-router-dom
即可，核心庫屬于依賴庫，會自動安裝。
一切皆元件 - 思維模式的轉變
既然一切都是元件，那麼我們可以按照以往寫元件的方式來使用路由，也可以把路由和其他元件寫在一起，可以當做 UI 元件的一部分來進行渲染。
更新之後的
Route
、
Link
、
Switch
、
BrowerRouter
、
HashRouter
等都是一個普通的元件。
//v3
<Router history={browserHistory}></Router>
//v4
<BrowerRouter></BrowerRouter>
//v4 新增 Switch 元件
<Switch><Route></Route></Switch>
複制
非集中式路由 - 更靈活
v4
之前版本我們隻能将路由規則集中寫在一起，無法和其他的元件寫在一起，更像是
api
的組合。
看下 v3的寫法
import { Router, Route, IndexRoute } from 'react-router'
const Layout = props => (
<div className="Layout-box">
<header>
React Router 3 App
</header>
<main>
{props.children}
</main>
</div>
)
const HomePage =() => <div>Home Page</div>
const UsersPage = () => <div>Users Page</div>
const App = () => (
<Router history={browserHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={HomePage} />
<Route path="/users" component={UsersPage} />
</Route>
</Router>
)
render(<App />, document.getElementById('root'))
複制
上面就是
v3
的一種集中式路由，布局和頁面元件是獨立的，所有元件都隻是路由的一個參數。
React Router 4
開始 不再主張集中式路由了（當然可以繼續使用），路由規則可以寫在布局和 UI 元件之間。
以下是
v4
中的寫法：
import { BrowserRouter, Route } from 'react-router-dom'
const Layout = () => (
<div className="layout-box">
<header>
React Router 4 App
</header>
<main>
<Route path="/" exact component={HomePage} />
<Route path="/users" component={UsersPage} />
</main>
</div>
)
const HomePage =() => <div>Home Page</div>
const UsersPage = () => <div>Users Page</div>
const App = () => (
<BrowserRouter>
<Layout />
</BrowserRouter>
)
render(<App />, document.getElementById('root'))
複制
v4
的寫法其實更符合元件式開發的理念，路由元件可以更靈活的被使用。
最後
本文主要是簡單的介紹了
v3
以後的路由理念和使用方式以及個人的了解，更多具體各個元件的使用會分為多個章節來完成，同時會配備相關的 demo。
暫定目錄如下：
- BrowserRouter HashRouter 元件
- Link VS NavLink 元件
- Redirect 元件應用
- Route 元件應用
- Switch 排他性路由
- 靜态路由元件 StaticRouter
- 元件比對
- 嵌套布局
- 異步元件加載
- 其他
參考
http://www.sohu.com/a/303613138_463970 v5 更新說明
https://css-tricks.com/react-router-4/ 關于 v4的一切