react-router-dom route URL路徑中帶參數怎么寫
在 react-router-dom 中，路由路徑（Route URL）可以包含動態參數，通常使用 :paramName 語法來定義。
?? 1. 在 <Route> 中定義動態參數
在 react-router-dom 的 Route 組件中，可以使用 :參數名 語法來表示 URL 參數。例如：
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import UserProfile from "./UserProfile";
function App() {
return (
<Router>
<Routes>
<Route path="/user/:userId" element={<UserProfile />} />
</Routes>
</Router>
);
}
export default App;
在這里，
/user/:userId 表示 userId 是一個動態參數，可以匹配 /user/123、/user/abc 等 URL。?? 2. 在組件中獲取 URL 參數
在 UserProfile 組件中，使用 useParams() 獲取 URL 傳遞的參數：
import { useParams } from "react-router-dom";
const UserProfile = () => {
const { userId } = useParams(); // 讀取 URL 參數
return <h1>用戶 ID: {userId}</h1>;
};
export default UserProfile;
?? 訪問
/user/42 時，userId 就是 "42"。?? 3. 傳遞多個參數
可以在路由路徑中定義多個參數：
tsx
<Route path="/order/:orderId/item/:itemId" element={<OrderItem />} /> 在組件中獲?。?/p>
tsx
const { orderId, itemId } = useParams(); console.log(orderId, itemId); // 訪問 /order/123/item/456 時，輸出 "123" 和 "456" ?? 4. 傳遞可選參數
在 react-router-dom v6.4+，可以使用 ? 定義可選參數：
tsx
<Route path="/product/:productId?" element={<ProductPage />} /> /product/123??productId = "123"/product/??productId = undefined
?? 5. 使用 useNavigate 進行動態跳轉
import { useNavigate } from "react-router-dom"; const Home = () => { const navigate = useNavigate(); const goToUser = () => { navigate(`/user/789`); // 動態跳轉到 /user/789 }; return <button onClick={goToUser}>查看用戶</button>; }; ?? 總結
| 功能 | 語法 | 示例 |
|---|---|---|
| 定義帶參數的路由 | /user/:userId |
/user/123 |
| 多個參數 | /order/:orderId/item/:itemId |
/order/100/item/50 |
| 可選參數（v6.4+） | /product/:productId? |
/product/42 or /product/ |
| 獲取參數 | useParams() |
{ userId: "123" } |
| 編程式跳轉 | navigate("/user/456") |
直接跳轉 |
你是想實現哪種類型的動態路由呢？??
浙公網安備 33010602011771號