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();