React Router簡介

React Router 4是將URL和您的React應用鏈接在一起的理想工具。 React Router是事實上的React路由庫，它是在React之上構建的最受歡迎的項目之一。

本教程介紹了React Router 4，最後一個穩定版本

React Router是事實上的React路由庫，它是在React之上構建的最受歡迎的項目之一。

React的核心是一個非常簡單的庫，它對路由沒有任何要求。

在單頁應用程序中路由是引入一些功能以通過鏈接導航應用程序的方法，這些功能是預期的在普通的Web應用程序中：

  1. 瀏覽器應該更改URL當您導航到其他屏幕時
  2. 深層連結應該可以正常工作：如果將瀏覽器指向URL，則應用程序應該重建生成URL時所顯示的視圖。
  3. 這瀏覽器後退（前進）按鈕應該像預期的那樣工作。

將您的應用程序導航與瀏覽器提供的導航功能一起路由在一起： 這地址欄和導航按鈕。

React Router提供了一種編寫代碼的方式，以便僅當路線與您定義的路線匹配時，它才會顯示您應用程序的某些組件。

安裝

和npm：

npm install react-router-dom

路線類型

React Router提供兩種不同的路由：

  • BrowserRouter
  • HashRouter

一個構建經典URL，另一個構建帶有散列的URL：

https://application.com/dashboard   /* BrowserRouter */
https://application.com/#/dashboard /* HashRouter    */

使用哪種瀏覽器主要取決於您需要支持的瀏覽器。BrowserRouter使用歷史API，這是相對較新的版本，在IE9及以下版本中不受支持。如果您不必擔心較舊的瀏覽器，則建議這樣做。

成分

與React Router一起使用時，您互動最多的3個組件是：

  • BrowserRouter，通常別名為Router
  • Link
  • Route

BrowserRouter包裝所有Route組件。

Link組件-您可以想像-用於生成到您的路線的鏈接

Route組件負責顯示或隱藏它們包含的組件。

瀏覽器路由器

這是BrowserRouter組件的簡單示例。您從react-router-dom導入它，並用它包裝所有應用程序：

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.render(
<Router>
<div>
<!– –>
</div>
</Router>,
document.getElementById(‘app’)
)

一個BrowserRouter組件只能有一個子元素，因此我們將所有要包裝的內容包裝在一個div元素。

鏈接組件用於觸發新路由。您從導入react-router-dom，然後您可以添加“鏈接”組件以指向不同的路線，to屬性：

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

ReactDOM.render(
<Router>
<div>
<aside>
<Link to={/dashboard}>Dashboard</Link>
<Link to={/about}>About</Link>
</aside>
<!– –>
</div>
</Router>,
document.getElementById(‘app’)
)

路線

現在，讓我們在上面的代碼片段中添加Route組件，以使事情按我們希望的那樣實際工作：

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

const Dashboard = () => (
<div>
<h2>Dashboard</h2>
…
</div>
)


const About = () => (
<div>
<h2>About</h2>
…
</div>
)


ReactDOM.render(
<Router>
<div>
<aside>
<Link to={/}>Dashboard</Link>
<Link to={/about}>About</Link>
</aside>


  <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">main</span><span style="color:#f92672">&gt;</span>
    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Route</span> <span style="color:#a6e22e">exact</span> <span style="color:#a6e22e">path</span><span style="color:#f92672">=</span><span style="color:#e6db74">'/'</span> <span style="color:#a6e22e">component</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">Dashboard</span>} <span style="color:#f92672">/&gt;</span>
    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Route</span> <span style="color:#a6e22e">path</span><span style="color:#f92672">=</span><span style="color:#e6db74">'/about'</span> <span style="color:#a6e22e">component</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">About</span>} <span style="color:#f92672">/&gt;</span>
  <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/main&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>

</Router>,
document.getElementById(‘app’)
)

在Glitch上檢查以下示例：https://glitch.com/edit/#!/flaviocopes-react-router-v4/

路線匹配時/，應用程序顯示儀表板成分。

通過點擊“關於”鏈接更改路線後，/about，儀表板組件將被刪除，關於組件已插入DOM中。

注意exact屬性。沒有這個path="/"也將匹配/about， 自從/包含在路線中。

匹配多個路徑

您可以使用正則表達式使路由響應多個路徑，因為path可以是一個正則表達式字符串：

<Route path='/(about|who)/' component={Dashboard} />

內聯渲染

而不是指定一個component財產Route，您可以設置一個render支柱：

<Route
  path='/(about|who)/'
  render={() => (
    <div>
      <h2>About</h2>
      ...
    </div>
  )}
/>

匹配動態路由參數

您已經了解瞭如何使用靜態路由，例如

const Posts = () => (
  <div>
    <h2>Posts</h2>
    ...
  </div>
)

//…

<Route exact path="/posts" component={Posts} />

這是處理動態路線的方法：

const Post = ({match}) => (
  <div>
    <h2>Post #{match.params.id}</h2>
    ...
  </div>
)

//…

<Route exact path="/post/:id" component={Post} />

在Route組件中，您可以在以下位置查找動態參數match.params。

match內聯渲染路線中也可用，這在這種情況下特別有用，因為我們可以使用id參數，用於在渲染Post之前在我們的數據源中查找post數據：

const posts = [
  { id: 1, title: 'First', content: 'Hello world!' },
  { id: 2, title: 'Second', content: 'Hello again!' }
]

const Post = ({post}) => (
<div>
<h2>{post.title}</h2>
{post.content}
</div>
)


//…

<Route exact path="/post/:id" render={({match}) => (
<Post post={posts.find(p => p.id === match.params.id)} />
)} />

免費下載我的反應手冊


更多反應教程：


在線技術維基！