20190425 react-router

官網地址：https://reacttraining.com/react-router/web/example/basic

什麼是React 路由，爲什麼需要

• React 路由：構建在react基礎上的強大的路由庫

• 作用：使 URL 與 網頁上顯示的數據 或者 頁面 保持同步

• 特點：每個路由都指向一個特定的頁面。

• 優點：react-router利用虛擬 DOM 和 diff算法對頁面進行’按需更新‘，只更新變化的部分，從而減少DOM性能消耗。

與常規路由的不同

• React 路由：只涉及單個頁面，只更改歷史記錄屬性，用戶感覺自己再不同的頁面間切換

• 常規路由：每個視圖對應一個新文件；實際上就是在不同的頁面之間進行切換

• v3 和 v4 的區別

  • v3是react-router，v4是react-router-dom
  • v4在v3的基礎上添加了一些瀏覽器下的特定的功能，比如：BrowserRouter、HashRouter、Link
  • v4沒有了的Router，替換的是BrowserRouter 和 HashRouter
  • v4沒有 <Route> 嵌套
  • v4沒有了<IndexRoute>，但是可以根據<Redirect> 重定向到默認的有效路徑或者一個Notfound頁面

原理

react-router 是建立在 history 之上的，history 監聽瀏覽器地址欄的變化，解析 URL 然後轉換成 location 對象，然後 router 使用它匹配到路由，正確的渲染對應的頁面。

重要的api

history

作用：管理各種JavaScript中的會話歷史記錄

• browser history ：特定於DOM的實現，在支持HTML5歷史記錄API的Web瀏覽器中非常有用
• hash history：針對舊版Web瀏覽器的特定於DOM的實現
• memory history： 內存中的歷史記錄實現，在測試和非DOM環境（如React Native）中非常有用

Switch組件

呈現與該位置匹配的第一個子<Route>或<Redirect>。

在多個定義的Route中呈現的某個Route時，可以使用 <Switch>，會按照順序將URL與定義的路由進行匹配。

Redirect組件

執行瀏覽器重定向：<Redirect> 在 <Switch> 中時， 組件只會在路由匹配不成功的情況下渲染。

Router組件 與 BrowserRouter組件 與 HashRouter組件

• Router組件：所有路由器組件的通用低級接口。

• BrowserRouter組件 或者 HashRouter組件：通常，應用程序將使用其中一個高級路由器。

相同點：都是使UI與URL保持同步

不同點：

• 保持同步的方式不一致
  • BrowserRouter 使用的是瀏覽器的 history api，創建一個真實的 URL；使用的是HTML5歷史記錄API（pushState，replaceState和popstate事件）；
  • HashRouter 使用的是URL的哈希部分（即window.location.hash）
• 是否需要服務器配置

  • BrowserHistory 需要服務器配置爲使用 BrowserHistory

    原因：使用 browserHistory 需要服務器去配置處理 URL，處理啓動最初的 /是沒有問題的，但是當路由來回跳轉並且在某個路由上進行頁面刷新時，服務器接收到來自某個路由的請求，需要處理這個 URL 並且在響應中包含 JavaScript 應用代碼。

  • HashRouter不需要配置

更多瞭解：https://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html

重要說明：哈希歷史記錄不支持location.key或location.state。 在以前的版本中，我們試圖填充行爲，但是有一些我們無法解決的邊緣情況。 任何需要此行爲的代碼或插件都不起作用。 由於此技術僅用於支持舊版瀏覽器，因此建議將服務器配置爲使用<BrowserHistory>。

Route組件

將 URL 與 path 對比，渲染對應的那個 component

• strict

  是否要求只有結尾斜線的路徑才能匹配有斜線的 location.pathname

• exact

  設置exact屬性爲true要求路徑與location.pathname必須完全匹配。

  // 不加 exact，訪問 /user，HomePage也會被渲染出來
  <main>
    <Route path="/" exact component={HomePage} />
    <Route path="/user" component={UsersPage} />
  </main>
  

  加上了exact之後，routes 需要識別它的完整路徑才能匹配，爲了減少重複輸入,我們可以使用 props.match.path 來代替：

  <Route path={`${props.match.path}/:userId`} exact component={BrowseUsersPage} />
  

• match

  match 對象爲我們提供了 match.params，match.path，和 match.url 等屬性

  match.path：構建 route 路徑
  match.url：瀏覽器 URL 的一部分

  <Route path="/user/:userId" component={UserProfilePage} />
  <UserProfilePage>
    <UserProfile userId={props.match.params.userId} />
  </UserProfilePage>
  

路由跳轉

靜態跳轉：<Link to='/pageOne/:id'>通過Link組件跳轉到頁面一</Link>

靜態跳轉過程：

1. Link負責觸發url變更
2. history來執行url變更，並同時通知Route重新渲染
3. Route負責根據url渲染組件

動態跳轉：使用 withRouter 高階組件，調用 props.history 進行跳轉

withRouter組件

withRouter會在組件渲染的時候，將更新後的 match, location, 和 history 以 props 的形式 傳遞給包裝組件

Link組件和a標籤跳轉的區別

<Link>在最後渲染的時候本質還是創建了<a>標籤，同時添加一個onClick事件，在事件中：

1. 如果<Link>定義了onClick方法，則執行該方法

2. 如果沒有定義，判定是否阻止a標籤的默認跳轉

    1. 阻止：根據replace的props值決定執行`history.push`還是執行`history.replace`。
    2. 不阻止：與`<a>`標籤的寫法類似，產生文檔請求。
   

react-router 利用虛擬 DOM 和 diff算法對頁面進行’按需更新‘，只更新變化的部分，從而減少DOM性能消耗。

react-router v4 返回上一級頁面

this.props.history.goBack();

router v4 版本 頁面跳轉傳參

import { withRouter } from "react-router-dom";
this.props.history.push(路由);
this.props.history.match.params;