學習一個東西最快的方式還是要自己進行實戰。
寫一個Demo，包括搜索框，點擊按鈕實現頁面跳轉。
使用的技術：react-router
未完待續。
From # react、react-router、redux 也許是最佳小實踐
Git如何切換賬戶（https://blog.csdn.net/junloin/article/details/75197880）
使用git時權限缺少導致部署失敗
https://blog.csdn.net/lansefanggezi123/article/details/79681941
也許學習react-router最好的辦法就是用react-router-dom v4來寫一個多頁的react應用。這個react應用會包含登錄、注冊、首頁、聯系人等頁面。
React Router 保持 UI 與 URL 同步。它擁有簡單的 API 與強大的功能例如代碼緩沖加載、動態路由匹配、以及建立正確的位置過渡處理。你第一個念頭想到的應該是 URL，而不是事后再想起。
路由配置
因為 route 一般被嵌套使用，所以使用 JSX 這種天然具有簡潔嵌套型語法的結構來描述它們的關系非常方便。然而，如果你不想使用 JSX，也可以直接使用原生 route 數組對象。
上面我們討論的路由配置可以被寫成下面這個樣子：
const routeConfig = [
{ path: '/',
component: App,
indexRoute: { component: Dashboard },
childRoutes: [
{ path: 'about', component: About },
{ path: 'inbox',
component: Inbox,
childRoutes: [
{ path: '/messages/:id', component: Message },
{ path: 'messages/:id',
onEnter: function (nextState, replaceState) {
replaceState(null, '/messages/' + nextState.params.id)
}
}
]
}
]
}
]
React.render(<Router routes={routeConfig} />, document.body)
進入和離開的Hook
Route 可以定義 onEnter 和 onLeave 兩個 hook ，這些hook會在頁面跳轉確認時觸發一次。這些 hook 對于一些情況非常的有用，例如權限驗證或者在路由跳轉前將一些數據持久化保存起來。
在路由跳轉過程中，onLeave hook 會在所有將離開的路由中觸發，從最下層的子路由開始直到最外層父路由結束。然后onEnter hook會從最外層的父路由開始直到最下層子路由結束。
路由匹配原理
路由擁有三個屬性來決定是否“匹配“一個 URL：
嵌套關系
React Router 使用路由嵌套的概念來讓你定義 view 的嵌套集合，當一個給定的 URL 被調用時，整個集合中（命中的部分）都會被渲染。嵌套路由被描述成一種樹形結構。React Router 會深度優先遍歷整個路由配置來尋找一個與給定的 URL 相匹配的路由。
路徑語法
路由路徑是匹配一個（或一部分）URL 的 一個字符串模式。大部分的路由路徑都可以直接按照字面量理解，除了以下幾個特殊的符號：
-
:paramName– 匹配一段位于/、?或#之后的 URL。 命中的部分將被作為一個參數 -
()– 在它內部的內容被認為是可選的 -
*– 匹配任意字符（非貪婪的）直到命中下一個字符或者整個 URL 的末尾，并創建一個splat參數
<Route path="/hello/:name"> // 匹配 /hello/michael 和 /hello/ryan
<Route path="/hello(/:name)"> // 匹配 /hello, /hello/michael 和 /hello/ryan
<Route path="/files/*.*"> // 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg
如果一個路由使用了相對路徑，那么完整的路徑將由它的所有祖先節點的路徑和自身指定的相對路徑拼接而成。使用絕對路徑可以使路由匹配行為忽略嵌套關系。
優先級
最后，路由算法會根據定義的順序自頂向下匹配路由。因此，當你擁有兩個兄弟路由節點配置時，你必須確認前一個路由不會匹配后一個路由中的路徑。例如，千萬不要這么做：
<Route path="/comments" ... />
<Redirect from="/comments" ... />
Histories
React Router 是建立在 history 之上的。 簡而言之，一個 history 知道如何去監聽瀏覽器地址欄的變化， 并解析這個 URL 轉化為 location 對象， 然后 router 使用它匹配到路由，最后正確地渲染對應的組件。
常用的 history 有三種形式， 但是你也可以使用 React Router 實現自定義的 history。
你可以從 React Router 中引入它們：
// JavaScript 模塊導入（譯者注：ES6 形式）
import { browserHistory } from 'react-router'
然后將它們傳遞給<Router>:
render(
<Router history={browserHistory} routes={routes} />,
document.getElementById('app')
)
---From React Router 中文文檔
React router v4 vs v3
v4是react router的一次重寫，所以和v3有很多不同的地方。主要有：
- 在react router v4里，路由不再是集中在一起的。它成了應用布局、UI的一部分。
- 瀏覽器用的router在react-router-dom里。所以，瀏覽器里使用的時候只需要import react-router-dom就可以。
- 新的概念BrowerRouter和HashRouter。他們各自服務于不同的情景下。詳見下文。
- 不再使用{props.children}來處理嵌套的路由。
- v4的路由默認不再排他，會有多個匹配。而v3是默認排他的，只會有一個匹配被使用。
react-router-dom是react-router中用于瀏覽器的。react-router被分為一下幾部分：
- react-router是瀏覽器和原生應用的通用部分。
- react-router-dom是用于瀏覽器的。
- react-router-native是用于原生應用的。
react-router是核心部分。react-router-dom提供了瀏覽器使用需要的定制組件。react-router-native則專門提供了在原生移動應用中需要用到的部分。
