/

React Router介紹

React Router介紹

React Router是連接URL和React應用程序的理想工具。React Router是事實上的React路由庫，也是React項目中最受歡迎的項目之一。

React Router是事實上的React路由庫，也是React項目中最受歡迎的項目之一。

React本身是一個非常簡單的庫，對路由方面並沒有任何的規範。

在單頁應用程序中，路由是引入一些特性以通過鏈接導航應用程序的方式，這是正常Web應用程序中預期的：

  1. 在切換到不同屏幕時，瀏覽器應更改URL。
  2. 深度鏈接應該正常工作：如果將瀏覽器指向URL，應用程序應該重建生成該URL時呈現的相同視圖。
  3. 瀏覽器的返回（和前進）按鈕應該按預期工作。

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

React Router提供了一種編寫代碼的方式，這樣只有在路由與您定義的內容匹配時才會顯示應用程序的特定組件。

安裝

使用npm安裝：

1
npm install react-router-dom

組件

在使用React Router時，您最常互動的組件有：

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

BrowserRouter包裝了所有的Route組件。

Link組件用於生成指向您的路由的鏈接。

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

BrowserRouter

下面是BrowserRouter組件的一個簡單示例。您從react-router-dom中導入它，並使用它來包裝您的整個應用程序：

1
2
3
4
5
6
7
8
9
10
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元素中。

Link組件用於觸發新的路由。您從react-router-dom中導入它，並可以添加Link組件以指向不同的路由，使用to屬性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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

現在我們在上面的片段中添加Route組件，以使事情按我們的預期工作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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>

      <main>
        <Route exact path="/" component={Dashboard} />
        <Route path="/about" component={About} />
      </main>
    </div>
  </Router>,
  document.getElementById('app')
)

當路由匹配/時，該應用程序顯示Dashboard組件。

當點擊“About”鏈接以將路由更改為/about時，Dashboard組件被移除，About組件被插入到DOM中。

請注意exact屬性。如果沒有此屬性，path="/"也將匹配/about，因為/包含在路由中。

在渲染的組件內訪問位置數據

在渲染的組件內部，我們可以通過使用useLocation鉤子來查看我們所在的路由：

1
2
3
4
5
6
7
8
9
import { useLocation } from 'react-router-dom'

// ...

function Post() {
  const location = useLocation()

  console.log(location.pathname) // '/'
}

以編程方式更改路由

在渲染的組件內部，您可以使用useHistory鉤子以編程方式更改路由：

1
2
3
4
5
6
7
8
9
import { useHistory } from 'react-router-dom'

// ...

function Post() {
  const history = useHistory()

  history.push('/post/new')
}

匹配多個路徑

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

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

內聯渲染

除了在Route中指定component屬性外，您還可以設置render prop：

1
2
3
4
5
6
7
8
9
<Route
  path="/(about|who)/"
  render={() => (
    <div>
      <h2>About</h2>
      {/* ... */}
    </div>
  )}
/>

匹配動態路由參數

請參閱如何從動態React Router路由獲取數據。