翻譯：瘋狂的技術宅
原文：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> 可以通過兩種方式定義視圖：
- 創建
<Route>中指定的 Component - 使用內聯
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 element5. 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>
)