react-router v4學習筆記

學習一個東西最快的方式還是要自己進行實戰。
寫一個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 可以定義 onEnteronLeave 兩個 hook ,這些hook會在頁面跳轉確認時觸發一次。這些 hook 對于一些情況非常的有用,例如權限驗證或者在路由跳轉前將一些數據持久化保存起來。

在路由跳轉過程中,onLeave hook 會在所有將離開的路由中觸發,從最下層的子路由開始直到最外層父路由結束。然后onEnter hook會從最外層的父路由開始直到最下層子路由結束。

路由匹配原理

路由擁有三個屬性來決定是否“匹配“一個 URL:

  1. 嵌套關系
  2. 它的 路徑語法
  3. 它的 優先級

嵌套關系

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則專門提供了在原生移動應用中需要用到的部分。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 源碼:https://github.com/Ching-Lee/react_shopping[https://gi...
    Ching_Lee閱讀 1,607評論 0 4
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,090評論 25 708
  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網絡請求組件 FMDB本地數據庫組件 SD...
    陽明AGI閱讀 16,003評論 3 119
  • 55米。 近20層樓那么高,下面是水,綁的腰不是腳踝,一次只可以上一個人。 買票的時候...
    又木二閱讀 354評論 0 0
  • 每天大腦近乎真空的狀態 零星蹦出的念頭和聽到的話語都可以一擊致命 現在已經不太會哭了 心是一片零落 我媽還說我別總...
    TingEva閱讀 167評論 3 1