react-router-dom route URL路径中带参数怎么写

在 react-router-dom 中，路由路径（Route URL）可以包含动态参数，通常使用 :paramName 语法来定义。

---

📌 1. 在 <Route> 中定义动态参数

在 react-router-dom 的 Route 组件中，可以使用 :参数名 语法来表示 URL 参数。例如：

tsx

复制编辑

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 传递的参数：

tsx

复制编辑

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 />} />

在组件中获取：

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 进行动态跳转

tsx

复制编辑

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")	直接跳转

你是想实现哪种类型的动态路由呢？😃

 

4o