學習一個東西最快的方式還是要自己進行實戰。
寫一個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則專門提供了在原生移動應用中需要用到的部分。