React 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 / 路徑時，它將顯示。也就是說，它是「首頁」。...

當您使用 React Router 以動態參數的方式時，一個非常常見的需求是獲取我們在頁面中顯示的數據。 舉個例子，假設我們有一個項目列表，點擊項目後會進入項目詳情頁，URL 地址為 /project/PROJECT_ID。 我找到了兩種方法來實現這個需求。 首先，在路由中聲明這樣的路徑： <Route path="/project/:id"> <SingleProject /> </Route> 注意這裡的 /project/:id 路徑。這表示該組件將接收到 id 參數中的動態部分。 接下來，在 SingleProject 組件中，我們可以使用 useParams 鉤子來獲取 id 參數： import { useHistory, useParams } from 'react-router-dom'; //... const { id } = useParams(); 在我的案例中，我使用這個 id 參數從一個項目數組中過濾出數據，但您也可以使用它來查詢數據庫或者進行其他任務。 另一種方式是使用 props： <Route path="/project/:id" render={(props) => <SingleProject {...props} />} /> 在 SingleProject 組件中（即在上面的 render 屬性中列舉的那個組件），我們使用傳入的 props： function SingleProject(props) { //... } 這些 props 包含在 match.params 屬性下的參數，所以我們可以使用對象解構來重新獲取我們的 id：...

我在使用 React Router 時，使用了 useLocation 和 useHistory hooks 的地方卻都返回了 undefined。這真是讓我感到困惑。 const history = useHistory() const location = useLocation() 結果都返回了 undefined。 後來才發現，我在同一個組件中使用 useLocation 和 useHistory 並在 DOM 中添加 <Router>...</Router>。 然後我找到了這個 issue，解釋說我不能這樣做。 我需要將 <Router>...</Router> 的包裹組件提升一層。在我的情況下，我在 index.js 文件中進行了如下修改： import { BrowserRouter as Router } from 'react-router-dom' ... ReactDOM.render( <React.StrictMode> <Router> <App /> </Router> </React.StrictMode>, document.getElementById('root') )

本短教程將解釋如何通過React Router 將props傳遞給子組件。 關於如何通過React Router將props傳遞給子組件，有多種解決方案，但其中一些已經過時。 其中最簡單的方法是將props添加到Route包裝組件： const Index = props => <h1>{props.route.something}</h1> var routes = <Route path="/" something={'here'} component={Index} /> 但是這種方式需要修改props的訪問方式，從this.props改為this.props.route.*，這可能或可能不被接受。 修復這個問題的方法是使用以下方式： const Index = props => ( <h1>{props.something}</h1> ) <Route path="/" render={() => <Index something={'here'} />} />