react系列 react router

react-router知識點梳理

react-router用處

其實在我思考react-router的用處時候，我有些愣住。

這不是理所固然的嗎！react-router能夠是組件路由啊,它能夠，額，它能夠...

在不清楚react-router的用處的時候，能夠先假設沒有react-router會怎樣。那麼，咱們編寫一個複雜應用會有什麼改變嗎？

因爲複雜應用通常具備多個頁面，在沒有react-router的狀況下進行頁面跳轉，必須本身監聽history的變化，以後渲染對應組件。

整體來講，固然能夠解決問題，可是本身實現很不優雅並且很麻煩。具體情形能夠參照:react-router簡介。

所以，咱們有了一個共同的需求。於時，前端各類框架中都可是了相似的router解決方案。在react框架中，react-router誕生，目的就是解決複雜應用中的路由改變致使的組件渲染問題。

接下來，咱們提到的react-router都是指React-Router 4。

react-router組成

組件成員

組件名稱	介紹
Router	路由容器組件，一般使用其中的BrowserRouter組件
Route	路由組件，其中path規定渲染組件路徑（匹配的組件都會渲染），exact規定精準匹配
Switch	路由容器組件，可是隻渲染第一個匹配的組件
Redirect	重定向路由組件
Prompt	提示路由組件
Link	至關於a標籤，跳轉
NavLink	至關於a標籤，提供額外的樣式
withRouter	高階組件，給須要路由參數的組件傳遞路由參數

特殊成員

成員	類型	介紹
history	屬性	Router組件的屬性，一般指定createBrowserHistory方法生成的對象
createBrowserHistory	方法	生成Browser history, import { createBrowserHistory } from "history";const history = createBrowserHistory();
location	屬性	路由參數對象,其中有開發者定義的參數
match	屬性	path：match.path 是爲路由編寫的路徑，用於匹配路徑模式。用於構建嵌套的 ; match.url 是瀏覽器 URL 中的實際路徑。URL 匹配的部分。 用於構建嵌套的 ; 在瀏覽器中訪問 /users/5，那麼 match.url將是 "/users/5" 而 match.path 將是 "/users/:userId";
generatePath	方法	路由跳轉generatePath("/user/:id/:entity(posts|comments)", {id: 1,entity: "posts"});

基於路由的代碼分割

推薦使用react官方文檔介紹的代碼分割解決方案：代碼分割

react-router路由守衛的實現方式

推薦在路由組件的生命週期內操做

react-router權限路由

解決方案推薦:

1. 權限路由
2. ant-design-pro相關源碼

推薦閱讀

1. 官方文檔
2. [譯]關於 React Router 4 的一切