React Router v4教程：爲你的 React 應用建立路由

翻譯：瘋狂的技術宅
原文： https://www.edureka.co/blog/r...

---

本文首發微信公衆號：前端先鋒
歡迎關注，天天都給你推送新鮮的前端技術文章

---

在這篇關於 React Router 的博文中，我將引導你搞懂 React 中路由的概念。

你將看到如下主題：

• 常規路由
• 爲何須要 React 路由？
• React 中的路由
• React Router v4 的優勢

常規路由

一般，當用戶在瀏覽器中鍵入 URL 時，會向服務器發送 HTTP 請求，而後服務器檢索 HTML 頁面。對於每一個新URL，用戶會被重定向到新的 HTML 頁面。你能夠經過參考下圖來更好地理解路由的工做原理。

爲何須要 React 路由？

將單頁應用限制爲單一視圖並不適用於 Facebook、Instagram 等流行的社交媒體網站，這些網站如今使用 React 呈現多個視圖。咱們須要繼續前進，學習如何在單頁面應用中顯示多個視圖。

例如咱們習慣看到顯示歡迎消息和相關內容的主頁。網站介紹的詳細信息能夠在「關於咱們」頁面上找到，用戶列表及其詳細信息會出如今不一樣的頁面上，可能還有其餘各類頁面包含不少不一樣的視圖。

那麼你認爲這是怎樣實現的呢？ 在程序中添加路由器能夠解決這一需求。

React 中的路由

這將把咱們帶到本文的主題：React Router v4。 2017年3月13日，Micheal Jackson 和 Ryan Florence 發佈了React Router v4 及可靠的文檔。

他們相信「Learn Once, Route Anywhere」的理念。

在 React Conf 2017 的演講中，他們經過展現如何將路由概念無縫地從 Web 平臺投射到 Native 平臺，以及將 React Router 集成到 VR 並在 React Native 中建立動畫來解釋這一點。雖然他們的談話中的着眼點是圍繞路由器 API 是如何「All About Components」的。

在React中，只涉及單個 「Html」 文件。每當用戶輸入新的 URL 請求時，路由不會從服務器獲取數據，而是爲每一個新的 URL 請求交換不一樣的 Component。用戶看上去是在多個頁面之間進行切換，但實際上，根據咱們的須要實現了多個視圖，每一個單獨的組件被從新渲染。

React 是如何實現這一目標的？

這就是'History'的概念出如今圖片中的地方。在 React 中，路由查看每一個組件的歷史記錄，當歷史記錄發生任何變化時，組件會從新渲染。在 Router v4 以前，咱們必須手動設置 History 的值。可是，從Router v4開始，<BrowserRouter>繞過了基本路徑，爲咱們減小了大量的工做。若是你仍然須要訪問歷史記錄，HTML5 提供了一個內置的 API，容許咱們經過 pushState 和 replaceState 方法修改 History 對象。

實際上，React Router 4 徹底重寫了以前的版本。建立本身的路由只是你已經精通的 React Components 後的天然擴展。雖然學習它須要花費一些時間，可是一旦你繼續前進，Router v4 將變得更有意義。

React Router v4 的優勢

本質上咱們是想在 React 的 render 方法中調用 Router Component。這是由於整個 Router API 都是關於組件的。固然，每一個 Component 的角色都是像全部 React 應用同樣呈現UI。

1. 無需手動設置歷史記錄

咱們只需將本身的 Router App Component 包裝在 <BrowserRouter> 中。

ReactDOM.render((
  <BrowserRouter>
      <App/>
  </BrowserRouter>
), document.getElementById(「root」));

如今讓咱們經過一個例子來理解路由：

咱們將建立三個頁面。這是頁面列表及其對應的地址。

Page	Address
Home	‘/’
About	‘/about’
Topic	‘/topic’

2. 包拆分：

react-router 庫如今被分爲三個獨立的包。

• react-router-dom：專爲 Web 應用而設計。
• react-router-native：專爲移動應用而設計。
• react-router-core：能夠用於核心應用的任何地方。

咱們須要安裝依賴項：

$ npm install --save react-router-dom

（若是你沒有安裝最新的npm（5.x）版本，請使用 save 命令。）

從 react-router-dom 庫中導入 BrowserRouter 以及 Link 和 Route。

能夠將 BrowserRouter 可視化爲呈現子路徑的根組件。

import {
  BrowserRouter,
  Route,
  Link
} from 'react-router-dom'

接下來讓咱們瞭解 Link 和 Route 組件，而後再繼續瞭解 Router v4 的優點。

Link

Link 用於在程序中的內部路由之間導航。它至關於錨標籤：<a> </a>。

Link 傳遞一個字符串參數 to，其中指定了 URL 的路徑。

<ul>
  <li><Link to="/">Home</Link></li>
  <li><Link to="/about">About</Link></li>
  <li><Link to="/topics">Topics</Link></li>
</ul>

Route

如今看一下 <Route>，它能夠被視爲負責從新渲染 UI 的單一子組件。若是用戶指定的位置與 <Route> 中定義的路徑匹配，則 <Route> 能夠經過兩種方式定義視圖：

1. 建立 <Route> 中指定的 Component
2. 使用內聯 render 函數

若是指定的URL與定義的路徑不匹配，<Route> 將返回 null。 <Route> 有兩個參數，一個用於路徑，另外一個用於渲染 UI。

<BrowserRouter>
  <div>
    <Route exact path="/" render={ ( ) => (<h2> HomePage </h2>) } />
    <Route path="/about" component={About}/>
    <Route path="/topics" component={Topics}/>
  </div>
</BrowserRouter>

3. 用 exact 取代 IndexRoute：

無需使用 IndexRoute 呈現 HomePage，你會注意到前面代碼片斷中的 exact 屬性。這是 React Router v4 聲明 性質的一個的例子。

v4 中的路由爲 inclusive 意味着能夠同時呈現多個路由。咱們使用 exact 屬性來解決多匹配中的問題。

在前面的例子中沒有使用 exact，URL '/' 將匹配路徑 '/'、'/about' 和 '/topics'。可是咱們但願 '/' 僅匹配咱們的渲染函數，所以使用 exact 明確地實現了這一點。

4. 路由只能有一個單一子元素：

這就是咱們須要在 <div> 中包裝路由的緣由。若是不這樣作，你會獲得如下異常。

Uncaught Error: A <Router> may have only one child element

5. Switch：

雖然咱們能夠在一個 <div> 標籤中封裝幾個路由。若是咱們但願一次只渲染一個路徑組件，可使用 <switch> 標籤。它按順序檢查每一個路徑的匹配並在找到第一個匹配後中止。

<switch>
  <route exact path=’/’   component={Home}/>
  <route path=’/users/:id’ component={User }/>
  <route path=’/users’   component={Roster}/>
<switch>

在示例中，咱們將路徑 /users/:id 放置在 /users 前面。這是由於 users/:id 將匹配 /users 和 /users/:id。

如今你已經對 React Router 有了基本的瞭解，下面是定義咱們的 Router App Component 的完整代碼。

const App= () => (
  <BrowserRouter>
    <div>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/topics">Topics</Link></li>
    </ul>
    <Route exact path="/" render={ ( ) => (<h2> HomePage </h2>) } />
    <Route path="/about" component={About}/>
    <Route path="/topics" component={Topics}/>
    </div>
  </BrowserRouter>
)

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

---

歡迎繼續閱讀本專欄其它高贊文章：

• 12個使人驚歎的CSS實驗項目
• 必需要會的 50 個React 面試題
• 世界頂級公司的前端面試都問些什麼
• 11 個最好的 JavaScript 動態效果庫
• CSS Flexbox 可視化手冊
• 從設計者的角度看 React
• 過節很無聊？仍是用 JavaScript 寫一個腦力小遊戲吧！
• CSS粘性定位是怎樣工做的
• 一步步教你用HTML5 SVG實現動畫效果
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現