這篇文章是系列的一部分 。

在本系列中，我們將從非常基礎開始，逐步瞭解您需要了解的所有內容，以便開始使用React。如果您曾經想學習React，那麼這裡就是您的最佳選擇！

客戶端路由

大多數（如果不是全部）應用程式在我們的單頁應用程式中都有多個檢視。讓我們直接使用React Router為我們的應用程式建立多個檢視。

我們已經完成了16天了！拍拍你自己...但不要太久......還有很多。

現在，我們的應用程式僅限於一個頁面。很難找到任何顯示單個檢視的複雜應用程式。例如，應用程式可能具有使用者可以登入的登入檢視，或者具有向用戶顯示其搜尋結果列表的搜尋結果頁面。這是兩個不同的檢視，具有兩個不同的頁面結構。

讓我們看看今天如何通過我們的應用程式改變它。

我們將使用非常流行的react-router庫來處理不同的連結。為了使用該react-router庫，我們需要使用npm包管理器安裝它：

npm install --save react-router-dom

隨著react-router安裝，我們會從庫中匯入了幾個package包和更新我們的應用程式架構。在我們進行這些更新之前，讓我們退一步，從高層次看看我們如何以及為什麼以這種方式構建我們的應用程式。

從概念上講，我們已經看到了如何使用元件和巢狀元件建立樹結構。使用帶有路徑的單頁面應用程式的這個透檢視，我們可以將頁面的不同部分視為子項。從這個角度來看，單頁面應用程式中的路由是我們可以將子樹的一部分用另一個子樹切換出來的想法。然後我們可以在瀏覽器中動態

換句話說，我們將定義充當一個陣營部件根的可路由元件的元件。然後我們可以告訴React更改一個檢視，它可以將整個React元件替換為另一個檢視，就像它是由伺服器呈現的完全不同的頁面一樣。

我們將使用我們的App元件並定義我們可以在此App元件中的應用程式中建立的所有不同路由。我們需要從react-router包中提取一些元件。我們將用於設定此結構的這些元件如下：

<BrowserRouter /> / <Router />

這是我們用來定義根或路由樹的元件。該<BrowserRouter />元件是React將在每個路由的基礎上替換它的子元件的元件。

<Route />

我們將使用該<Route />元件建立在網址上可用的特定位置可用的路線。該<Route />元件安裝在頁面URL上，該URL與路由配置中設定的特定路由相匹配props。

處理客戶端導航的一種較舊的相容方法是使用#表示應用程式端點的（雜湊）標記。我們將使用這種方法。我們需要匯入這個物件來告訴瀏覽器這是我們想要處理導航的方式。

從我們幾天前建立的應用程式的根目錄開始，讓我們更新我們src/App.js的匯入這些模組。我們將BrowserRouter通過ES6使用不同的名稱語法匯入：

import React from 'react';

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

export default class App extends React.Component {

  render() {
    <Router>
      {/* routes will go here */}
    </Router>
  }

}

現在讓<Router />我們使用我們在render()函式中匯入的元件在DOM中定義路由根。我們將使用historyprop 定義我們正在使用的路由型別。在此示例中，我們將使用通用相容的雜湊歷史記錄型別：

export default class App extends React.Component {
  // ...
  render() {
    <Router>
      {/* routes will go here */}
    </Router>
  }
  // ...
}

現在讓我們定義我們的第一條路線。要定義一個路由，我們將使用<Route />元件匯出react-router並傳遞一些道具：

• path - 要啟用的路徑的路徑
• component - 定義路徑檢視的元件

讓我們/用一個只顯示一些靜態內容的無狀態元件來定義根路徑上的路由：

const Home = () => (<div><h1>Welcome home</h1></div>)
  // ...
class App extends React.Component {
  render() {
    return (
      <Router>
        <Route path="/" component={Home} />
      </Router>
    )
  }
}

在瀏覽器中載入此頁面，我們可以看到我們在根網址獲取單一路由。不是很令人興奮。讓我們新增第二條路線，在/aboutURL上顯示一個關於頁面的資訊。

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

const Home = () => (<div><h1>Welcome home</h1></div>)

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Route path="/" component={Home} />
          <Route path="/about" component={About} />
        </div>
      </Router>
    )
  }
}

在我們的檢視中，我們需要新增一個連結（或錨標記 - <a />），以使我們的使用者能夠在兩條不同的路線之間自由旅行。但是，使用<a />標記會告訴瀏覽器將路由視為伺服器端路由。取而代之的是，我們需要使用稱為不同的元件（驚訝）： <Link />。

該<Link />元件需要一個被呼叫的prop to來指向我們想要呈現的客戶端路由。讓我們更新Home和About元件來使用Link：

const Home = () => (<div><h1>Welcome home</h1><Link to='/about'>Go to about</Link></div>)
const About = () => (<div><h1>About</h1><Link to='/'>Go home</Link></div>)

等一下......我們不太希望兩條路線都出現......這是因為反應路由器將呈現與路徑匹配的所有內容（除非另有說明）。在這種情況下，反應路由器為我們提供Switch元件。

該<Switch />元件將僅呈現它找到的第一個匹配路由。讓我們更新我們的元件以使用該Switch元件。由於react路由器將嘗試呈現兩個元件，我們需要指定我們只想exact在根元件上進行匹配。

const Home = () => (<div><h1>Welcome home</h1><Link to='/about'>Go to about</Link></div>)
  // ...
class App extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path="/about" component={About} />
          <Route path="/" component={Home} />
        </Switch>
      </Router>
    )
  }
}

顯示檢視

Althogh這是一個有限的介紹，我們不能討論處理反應路由器而不談論我們可以獲得子元件的不同方式。

我們已經看到了使用componentprop 的最簡單方法，但是有一個更強大的方法使用了一個名為prop的方法render。該render道具有望成為一個將與被呼叫函式match與沿物件location和路由配置。

該render道具可以讓我們呈現什麼，我們希望在一個subroute，其中包括渲染等航線。狡猾，恩？讓我們看看這個行動：

import React from 'react';

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

const Home = () => (<div><h1>Welcome home</h1><Link to='/about'>Go to about</Link></div>)
const About = ({ name }) => (<div><h1>About {name}</h1></div>)
  // ...
class App extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route
            path="/about"
            render={(renderProps) => (
              <div>
                <Link to='/about/ari'>Ari</Link>
                <Link to='/about/nate'>Nate</Link>
                <Route
                  path="/about/:name"
                  render={(renderProps) => (
                    <div>
                      <About name={renderProps.match.params.name} />
                      <Link to='/'>Go home</Link>
                    </div>
                  )} />
              </div>
            )} />
          <Route
            path="/"
            render={(renderProps) => (
              <div>
                Home is underneath me
                <Home {...this.props} {...renderProps} />
              </div>
            )} />
        </Switch>
      </Router>
    )
  }
}
export default App;

現在我們的應用程式中有多個頁面。我們已經研究瞭如何通過巢狀元件渲染這些路由，只需要幾個匯出react-router。

react-router提供了更多功能，我們沒有時間介紹我們的快速路由介紹。更多資訊請訪問：

明天，我們將開始與Redux整合。這是我們開始整合更復雜資料處理的地方。

學習REACT正確的方法

React和朋友的最新，深入，完整的指南。

下載第一章

❮上一個

下一章：

Flux簡介

下一個 ❯

本教程系列的完整原始碼可以在GitHub repo上找到，其中包括所有樣式和程式碼示例。

如果您在任何時候感到困難，還有其他問題，請隨時通過以下方式與我們聯絡：