Reach Router 教學

快速開始在您的 React 應用程式中使用 Reach Router

在最近的一個專案中，我使用了 Reach Router ，我認為這是在 React 應用程式中實現路由的最簡單方法。

相比於我之前使用過的 React Router 來說，我覺得 Reach Router 更容易上手。

以下是一個短短五分鐘的教學，讓您快速了解 Reach Router 的基本用法。

安裝

首先，在命令行輸入以下指令安裝 Reach Router：

npm install @reach/router

如果您對 @ 的語法不熟悉，它是 npm 的一個功能，允許使用專屬的套件名稱空間來命名套件。

接下來，將它引入到您的專案中：

import { Router } from '@reach/router'

我在頂層 React 檔案 index.js 中使用它，通常是在 create-react-app 安裝中，我將所有想要顯示的元件包裝在內：

ReactDOM.render(
 <Router>
 <Form path="/" />
 <PrivateArea path="/private-area" />
 </Router>,
 document.getElementById('root')
)

我在元件上添加的 path 屬性可用於設定它們的路徑。換句話說，當我在瀏覽器的網址欄輸入這個路徑時，Reach Router 就會顯示對應的元件給我看。

/ 路徑是預設路由，也就是當您在應用程式網域之外沒有設置 URL / 路徑時，它將顯示。也就是說，它是「首頁」。

當使用者訪問一個沒有匹配到任何路由的 URL 時，Reach Router 預設會導向 / 路由。您可以添加一個 default 路由處理這種情況，並顯示一個漂亮的「404」訊息：

<Router>
 <Form path="/" />
 <PrivateArea path="/private-area" />
 <NotFound default />
</Router>

使用 navigate 函數在應用程式中以程式方式改變路由：

import { navigate } from '@reach/router'

navigate('/private-area')

使用 Link 元件，使用 JSX 連結到您的路由：

import { Link } from '@reach/router'

<Link to="/">首頁</Link>
<Link to="/private-area">私人區域</Link>

使用 :param 語法來添加參數：

<Router>
 <User path="users/:userId" />
</Router>

然後在假設的 User 元件中，我們可以使用 userId 作為屬性：

const User = ({ userId }) => (
 <p>使用者 {userId}</p>
)

我在前面的頂層 React 檔案中向您展示了如何定義路由：

<Router>
 <Form path="/" />
 <PrivateArea path="/private-area" />
</Router>

您可以定義巢狀路由：

<Router>
 <Form path="/" />
 <PrivateArea path="/private-area">
 <User path=":userId" />
 </PrivateArea>
</Router>

現在，您可以將您的 /private-area/23232 鏈接指向 User 元件，並將 userId 作為參數傳遞。

您還可以選擇允許元件在其內部定義自己的子路由。只需在路由之後使用 /* 通配符即可：

<Router>
 <Form path="/" />
 <PrivateArea path="/private-area/\*" />
</Router>

然後在該元件內部，您可以再次引入 Router，並定義它自己的子路由集合：

//component PrivateArea
<Router>
 <User path="/:userId" />
</router>

任何 /private-area/something 的路徑都會由 User 元件處理，並且該路徑之後的部分都將作為 userId 屬性傳遞。

要在 /private-area 路徑中顯示一些內容，您還需要在 PrivateArea 元件中添加一個 / 路由處理：

//component PrivateArea
<Router>
 <User path="/:userId" />
 <PrivateAreaDashboard path="/" />
</router>