天天看點
傳回

【React】1036- React 中的一些 Router 必備知識點

前言

每次開發新頁面的時候，都免不了要去設計一個新的 URL，也就是我們的路由。其實路由在設計的時候不僅僅是一個由幾個簡單詞彙和斜杠分隔符組成的連結，偶爾也可以去考慮有沒有更“優雅”的設計方式和技巧。而在這背後，路由群組件之間的協作關系是怎樣的呢？于是我以 React 中的 Router 使用方法為例，整理了一些知識點小記和大家分享～

React-Router

基本用法

通常我們使用 React-Router (https://reactrouter.com/native/guides/quick-start) 來實作 React 單頁應用的路由控制，它通過管理 URL，實作元件的切換，進而呈現頁面的切換效果。

其最基本用法如下：

import { Router, Route } from 'react-router';
render((
  <Router>
    <Route path="/" component={App}/>
  </Router>
), document.getElementById('app'));

亦或是嵌套路由：

在 React-Router V4 版本之前可以直接嵌套，方法如下：

<Router>
  <Route path="/" render={() => <div>外層</div>}>
      <Route path="/in" render={() => <div>内層</div>} />
  </Route>
</Router>

上面代碼中，理論上，使用者通路 ​

​/in​

​​ 時，會先加載 ​

​<div>外層</div>​

​​，然後在它的内部再加載 ​

​<div>内層</div>​

​。

然而實際運作上述代碼卻發現它隻渲染出了根目錄中的内容。後續對比 React-Router 版本發現，是因為在 V4 版本中變更了其渲染邏輯，原因據說是為了踐行 React 的元件化理念，不能讓 Route 标簽看起來隻是一個标簽（奇怪的知識又增加了）。

現在較新的版本中，可以使用 Render 方法實作嵌套。

<Route
  path="/"
  render={() => (
    <div>
      <Route
        path="/"
        render={() => <div>外層</div>}
      />
      <Route
        path="/in"
        render={() => <div>内層</div>}
      />
      <Route
        path="/others"
        render={() => <div>其他</div>}
      />
    </div>
  )}
/>

此時通路 ​

​/in​

​​ 時，會将“外層”和“内層”一起展示出來，類似地，通路 ​

​/others​

​ 時，會将“外層”和“其他”一起展示出來。

【React】1036- React 中的一些 Router 必備知識點

路由傳參小 Tips

在實際開發中，往往在頁面切換時需要傳遞一些參數，有些參數适合放在 Redux 中作為全局資料，或者通過上下文傳遞，比如業務的一些共享資料，但有些參數則适合放在 URL 中傳遞，比如頁面類型或詳情頁中單據的唯一辨別 ​

​id​

​​。在處理 URL 時，除了問号帶參數的方式，React-Router 能幫我們做什麼呢？在這其中，Route 元件的 ​

​path​

​ 屬性便可用于指定路由的比對規則。

場景 1

描述：就想讓普普通通的 URL 帶個平平無奇的參數

那麼，接下來我們可以這樣幹：

Case A：路由參數

path="/book/:id"

我們可以用冒号 + 參數名字的方式，将想要傳遞的參數添加到 URL 上，此時，當參數名字（本 Case 中是 id）對應的值改變時，将被認為是不同 URL。

Case B：查詢參數

path="/book"

如果想要在頁面跳轉的時候問号帶參數，那麼 path 可以直接設計成既定的樣子，參數由跳轉方拼接。在跳轉時，有兩種形式帶上參數。其一是在 Link 元件的 to 參數中通過配置字元串并用問号帶參數，其二是 to 參數可以接受一個對象，其中可以在 search 字段中配置想要傳遞的參數。

<Link to="/book?id=111" />
// 或者
<Link to={{
  pathname: '/book',
  search: '?id=111',
}}/>

此時，假設目前頁面 URL 中的 id 由 111 修改為 222 時，該路由對應的元件（在上述例子中就是 React-Route 配置時 ​

​path="/book"​

​ 對應的頁面/元件 ）會更新，即執行 componentDidUpdate 方法，但不會被解除安裝，也就是說，不會執行 componentDidMount 方法。

Case C：查詢參數隐身式帶法

path="/book"

path 依舊設計成既定的樣子，而在跳轉時，可以通過 Link 中的 state 将參數傳遞給對應路由的頁面。

<Link to={{
  pathname: '/book',
  state: { id: 111 }
}}/>

但一定要注意的是，盡管這種方式下查詢參數不會明文傳遞了，但此時頁面重新整理會導緻參數丢失（存儲在 state 中的通病），So，灰常不推薦~~（其實不想明文可以進行加密處理，但一般情況下敏感資訊是不建議放在 URL 中傳遞的～）

場景 2

描述：編輯/詳情頁，想要共用一個頁面，URL 由不同的參數區分，此時我們希望，參數必須為 edit、detail、add 中的 1 個，不然需要跳轉到 404 Not Found 頁面。 
path='/book/:pageType(edit|detail|add)'

如果不加括号中的内容 ​

​(edit|detail|add)​

​，當傳入錯誤的參數（比如使用者誤操作、随便拼接 URL 的情況），則頁面不會被 404 攔截，而是繼續走下去開始渲染頁面或調用接口，但此時很有可能導緻接口傳參錯誤或頁面出錯。

場景 3

描述：新增頁和編輯頁辣麼像，我的新增頁也想和編輯/詳情共用一個頁面。但是新增頁不需要 id，編輯/詳情頁需要 id，使用同一個頁面怎麼辦？ 
path='/book/:pageType(edit|detail|add)/:id?'

别急，可以用 ​

​?​

​ 來解決，它意味着 id 不是一個必要參數，可傳可不傳。

場景 4

描述：我的 id 隻能是數字，不想要字元串怎麼辦？ 
path='/book/:id(\\\d+)'

此時 id 不是數字時，會跳轉 404，被認為 URL 對應的頁面找不到啦。

底層依賴

有了這麼多場景，那 Router 是怎樣實作的呢？其實它底層是依賴了 path-to-regexp (https://github.com/pillarjs/path-to-regexp/tree/v1.7.0) 方法。

var pathToRegexp = require('path-to-regexp')
// pathToRegexp(path, keys, options)
// 示例
var keys = []
var re = pathToRegexp('/foo/:bar', keys)
// re = /^\/foo\/([^\/]+?)\/?$/i
// keys = [{ name: 'bar', prefix: '/', delimiter: '/', optional: false, repeat: false, pattern: '[^\\/]+?' }]
delimiter：重複參數的定界符，預設是 '/'，可配置

一些其他常用的路由正則通配符：

  • ? 可選參數
  • * 比對 0 次或多次
  • + 比對 1 次或多次

如果忘記寫參數名字，而隻寫了路由規則，比如下述代碼中 ​

​/:foo​

​ 後面的參數：

var re = pathToRegexp('/:foo/(.*)', keys)
// 比對除“\n”之外的任何字元
// keys = [{ name: 'foo', ... }, { name: 0, ...}]
re.exec('/test/route')
//=> ['/test/route', 'test', 'route']

它也會被正确解析，隻不過在方法處理的内部，未命名的參數名會被替換成數組下标。

取路由參數

path 帶的參數，可以通過 ​

​this.props.match​

​ 擷取

例如：

// url 為 /book/:pageType(edit|detail|add)
const { match } = this.props;
const { pageType } = match.params;

由于有 #，# 之後的所有内容都會被認為是 hash 的一部分，window.location.search 是取不到問号帶的參數的。

比如：http://aaa.bbb.com/book-center/#/book/list?id=123

那麼在 React-Router 中，問号帶的參數，可以通過 ​

​this.props.location​

​ （官方牆推 👍）擷取。個人了解是因為 React-Router 幫我們做了處理，通過路由和 hash 值（window.location.hash）做了解析的封裝。

例如：

// url 為 /book?pageType=edit
const { location } = this.props;
const searchParams = location.search; // ?pageType=edit

實際列印 props 參數發現，​

​this.props.history.location​

​ 也可以取到問号參數，但不建議使用，因為 React 的生命周期（componentWillReceiveProps、componentDidUpdate）可能使它變得不可靠。

在早期的 React-Router 2.0 版本是可以用 location.query.pageType 來擷取參數的，但是 V4.0 去掉了（有人認為查詢參數不是 URL 的一部分，有人認為現在有很多第三方庫，交給開發者自己去解析會更好，有個對此讨論的 Issue，有興趣的可以自行擷取 😊 https://github.com/ReactTraining/react-router/issues/4410）

針對上一節中場景 1 的 Case C，查詢參數隐身式帶法時（從 state 裡帶過去的），在 ​

​this.props.location.state​

​ 裡可以取到（不推薦不推薦不推薦，重新整理會沒～）

Switch 

<div>
  <Route
    path="/router/:type"
    render={() => <div>影像</div>}
  />
  <Route
    path="/router/book"
    render={() => <div>圖書</div>}
  />
</div>

如果 ​

​<Route />​

​​ 是平鋪的（用 ​

​div​

​​ 包裹是因為 Router 下隻能有一個元素），輸入 ​

​/router/book​

​ 則影像和圖書都會被渲染出來，如果想要隻精确渲染其中一個，則需要 Switch

<Switch>
  <Route
    path="/router/:type"
    render={() => <div>影像</div>}
  />
  <Route
    path="/router/book"
    render={() => <div>圖書</div>}
  />
</Switch>

Switch 的意思便是精準的根據不同的 path 渲染不同 Route 下的元件。但是，加了 Switch 之後路由比對規則是從上到下執行，一旦發現比對，就不再比對其餘的規則了。是以在使用的時候一定要“百般小心”。

上面代碼中，使用者通路 ​

​/router/book​

​​ 時，不會觸發第二個路由規則（不會展示“圖書”），因為它會比對 ​

​/router/:type​

​ 這個規則。是以，帶參數的路徑一般要寫在路由規則的底部。

路由的基本原理

路由做的事情：管控 URL 變化，改變浏覽器中的位址。

Router 做的事情：URL 改變時，觸發渲染，渲染對應的元件。

URL 有兩種，一種不帶 #，一種帶 #，分别對應 Browse 模式和 Hash 模式。

一般單頁應用中，改變 URL，但是不重新加載頁面的方式有兩類：

Case 1（會觸發路由監聽事件）：點選 前進、後退，或者調用的 history.back( )、history.forward( )

Case 2（不會觸發路由監聽事件）：元件中調用 history.push( ) 和 history.replace( )

于是參考「源碼解析 」這一次徹底弄懂 React-Router 路由原理一文，針對上述兩種 Case，以及這兩種 Case 分别對應的兩種模式，作出如下總結。

【React】1036- React 中的一些 Router 必備知識點
圖檔來源：「源碼解析 」這一次徹底弄懂 React-Router 路由原理

Browser 模式

Case 1:

URL 改變，觸發路由的監聽事件 ​

​popstate​

​​，then，監聽事件的回調函數 ​

​handlePopState​

​​ 在回調中觸發 history 的 ​

​setState​

​​ 方法，産生新的 location 對象。state 改變，通知 Router 元件更新 ​

​location​

​​ 并通過 context 上下文傳遞，比對出符合的 Route 元件，最後由 ​

​<Route />​

​ 元件取出對應内容，傳遞給渲染頁面，渲染更新。

/* 簡化版的 handlePopState （監聽事件的回調） */
const handlePopState = (event)=>{
     /* 擷取目前location對象 */
    const location = getDOMLocation(event.state)
    const action = 'POP'
     /* transitionManager 處理路由轉換 */
    transitionManager.confirmTransitionTo(location, action, getUserConfirmation, (ok) => {
        if (ok) {
          setState({ action, location })
        } else {
          revertPop(location)
        }
    })
}

Case 2: 以 history.push 為例，首先依據你要跳轉的 path 建立一個新的 ​

​location​

​​ 對象，然後通過 ​

​window.history.pushState​

​​ （H5 提供的 API ）方法改變浏覽器目前路由（即目前的 url），最後通過 ​

​setState​

​ 方法通知 Router，觸發元件更新。

const push = (path, state) => {
   const action = 'PUSH'
   /* 建立location對象 */
   const location = createLocation(path, state, createKey(), history.location)
   /* 确定是否能進行路由轉換 */
   transitionManager.confirmTransitionTo(location, action, getUserConfirmation, (ok) => {
   ... // 此處省略部分代碼
   const href = createHref(location)
   const { key, state } = location
   if (canUseHistory) {
     /* 改變 url */
     globalHistory.pushState({ key, state }, null, href)
     if (forceRefresh) {
       window.location.href = href
     } else {
       /* 改變 react-router location對象, 建立更新環境 */
       setState({ action, location })
     }
   } else {
     window.location.href = href
   }
 })
}

Hash 模式

Case 1:

增加監聽，當 URL 的 Hash 發生變化時，觸發 hashChange 注冊的回調，回調中去進行相類似的操作，進而展示不同的内容。

window.addEventListener('hashchange',function(e){
  /* 監聽改變 */
})

Case 2:

​

​history.push​

​​ 底層調用 ​

​window.location.hash​

​​ 來改變路由。​

​history.replace​

​​ 底層是調用 ​

​window.location.replace​

​ 改變路由。然後 setState 通知改變。

從一些參考資料中顯示，出于相容性的考慮（H5 的方法 IE10 以下不相容），路由系統内部将 Hash 模式作為建立 History 對象的預設方法。（此處若有疑議，歡迎指正～）

Dva/Router

在實際項目中發現，Link，Route 都是從 ​

​dva/router​

​ 中引進來的，那麼，Dva 在這之中做了什麼呢？

答案：貌似沒有做特殊處理，Dva 在 React-Router 上做了上層封裝，會預設輸出 React-Router (https://github.com/ReactTraining/react-router) 接口。

我們對 Router 做過的一些處理

Case 1:

項目代碼的 src 目錄下，不管有多少檔案夾，路由一般會放在同一個 router.js 檔案中維護，但這樣會導緻頁面太多時，檔案内容會越來越長，不便于查找和修改。

是以我們可以做一些小改造，在 src 下的每個檔案夾中，建立自己的路由配置檔案，以便管理各自的路由。但這種情況下 React-Router 是不能識别的，于是我們寫了一個 Plugin 放在 Webpack 中，目的是将各個檔案夾下的路由彙總，并生成 router-config.js 檔案。之後，将該檔案中的内容解析成元件需要的相關内容。插件實作方式可了解本團隊另一篇文章：​​手把手帶你入門Webpack Plugin​​。

Case 2:

路由的 Hash 模式雖然相容性好，但是也存在一些問題：

  1. 對于 SEO、前端埋點不太友好，不容易區分路徑
  2. 原有頁面有錨點時，使用 Hash 模式會出現沖突

是以公司内部做了一次 Hash 路由轉 Browser 路由的改造。

如原有連結為：http://aaa.bbb.com/book-center/#/book/list?id=123

改造方案為：

通過新增以下配置代碼去掉 #

import createHistory from 'history/createBrowserHistroy';
const app = dva({
  history: createHistory({
    basename: '/book-center',
  }),
  onError,
});

同時，為了避免使用者通路舊頁面出現 404 的情況，前端需要在 Redirect 中配置重定向以及在 Nginx 中配置舊的 Hash 頁面轉發。

Case 3:

在實際項目中，其實我們也會去考慮使用者未授權時路由跳轉、頁面 404 時路由跳轉等不同情況，以下 Case 和代碼僅供讀者參考～

<Switch>
  {
    getRoutes(match.path, routerData).map(item
     (
       // 使用者未授權處理，AuthorizedRoute 為項目中自己實作的處理元件
       <AuthorizedRoute
         {...item}
         redirectPath="/exception/403"
       />
     )
    )
  }
  // 預設跳轉頁面
  <Redirect from="/" exact to="/list" />
  // 頁面 404 處理
  <Route render={props => <NotFound {...props} />} />
</Switch>
監聽事件 帶參數 嵌套
上一篇: meson+ninja編譯libfuse-3.2.3
下一篇: linux軟raid步驟,linux 軟raid建立過程

繼續閱讀