React - React router with customized id
03 May 2023react
在 Route 的過程中,發現一個問題,那就是如何在跳轉到 /user
這個 link 的同時,透過 /user/:userid
這種方式將想傳遞的內容傳遞到 component 內呢?找到的方法如下:
- 定義 Route,後面的
<User />
是要路由過去的 component,也就是需要取得 userid 的頁面<Route path="user/:userid" element={<User />} />
- 頁面跳轉的 Link,userid 是某個 dynamic 的變數,像如果 userid 是 1 的話,等同
<Link href="/user/1" />
<Link href={"/user/"+ userid} />
- 在目標頁面(component),也就是
<User />
內取得idimport { useParams } from "react-router-dom"; let { userid } = useParams();