Reach Router 教學
快速開始在您的 React 應用程式中使用 Reach Router
在最近的一個專案中,我使用了 Reach Router ,我認為這是在 React 應用程式中實現路由的最簡單方法。
相比於我之前使用過的 React Router 來說,我覺得 Reach Router 更容易上手。
以下是一個短短五分鐘的教學,讓您快速了解 Reach Router 的基本用法。
安裝
首先,在命令行輸入以下指令安裝 Reach Router:
1 | npm install @reach/router |
如果您對
@
的語法不熟悉,它是 npm 的一個功能,允許使用專屬的套件名稱空間來命名套件。
接下來,將它引入到您的專案中:
1 | import { Router } from '@reach/router' |
基本用法
我在頂層 React 檔案 index.js
中使用它,通常是在 create-react-app 安裝中,我將所有想要顯示的元件包裝在內:
1 | ReactDOM.render( |
我在元件上添加的 path
屬性可用於設定它們的路徑。換句話說,當我在瀏覽器的網址欄輸入這個路徑時,Reach Router 就會顯示對應的元件給我看。
/
路徑是預設路由,也就是當您在應用程式網域之外沒有設置 URL / 路徑時,它將顯示。也就是說,它是「首頁」。
預設路由
當使用者訪問一個沒有匹配到任何路由的 URL 時,Reach Router 預設會導向 /
路由。您可以添加一個 default
路由處理這種情況,並顯示一個漂亮的「404」訊息:
1 | <Router> |
以程式方式改變路由
使用 navigate
函數在應用程式中以程式方式改變路由:
1 | import { navigate } from '@reach/router' |
1 | navigate('/private-area') |
在 JSX 中連結路由
使用 Link
元件,使用 JSX 連結到您的路由:
1 | import { Link } from '@reach/router' |
1 | <Link to="/">首頁</Link> |
URL 參數
使用 :param
語法來添加參數:
1 | <Router> |
然後在假設的 User 元件中,我們可以使用 userId
作為屬性:
1 | const User = ({ userId }) => ( |
巢狀路由
我在前面的頂層 React 檔案中向您展示了如何定義路由:
1 | <Router> |
您可以定義巢狀路由:
1 | <Router> |
現在,您可以將您的 /private-area/23232
鏈接指向 User 元件,並將 userId
作為參數傳遞。
您還可以選擇允許元件在其內部定義自己的子路由。只需在路由之後使用 /*
通配符即可:
1 | <Router> |
然後在該元件內部,您可以再次引入 Router,並定義它自己的子路由集合:
1 | //component PrivateArea |
任何 /private-area/something
的路徑都會由 User 元件處理,並且該路徑之後的部分都將作為 userId
屬性傳遞。
要在 /private-area
路徑中顯示一些內容,您還需要在 PrivateArea
元件中添加一個 /
路由處理:
1 | //component PrivateArea |
tags: [“React”, “React Router”, “Reach Router”, “routing”]