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

在组件中获取：

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

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