React Router：如何從動態路由中獲取數據
當您使用 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：...