useParams useParams 读参数
最后更新：2026-10-28
useParams useParams 读参数
useParams 返回当前匹配路由的动态段对象：路由写成 /users/:id 时，访问 /users/42 就能拿到 { id: '42' }。详情页、编辑页读取「这一条数据是谁」全靠它，注意参数永远是字符串。
| 分组 | 路由与状态管理 |
|---|---|
| 类型 | Hook |
| 引入版本 | React Router 6.4 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
import { useParams } from 'react-router-dom'
// 路由：<Route path="/users/:id" element={<UserDetail />} />
function UserDetail() {
const { id } = useParams() // { id: '42' }，注意是字符串
const user = users.find(u => u.id === id)
return <h1>用户 {user?.name}</h1>
}返回值：返回对象：键为路由里以 : 声明的参数名，值为 URL 中的实际片段（字符串，如 { id: '42' }）。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
点「访问 /users/2」后参数变 2、页面显示小红——对应 useParams 从 URL 动态段取值的效果（模拟演示）。💡 要点
⚠️ 注意 参数永远是字符串：id === 2 永远为 false，比较前先 Number(id) 或统一用字符串。
💡 提示 可选参数用 :id?，通配符用 *（splat）；嵌套路由中 useParams 会合并所有父级路由的参数。
ℹ️ 说明 读取查询字符串（?tab=2）不用它，改用 useSearchParams。
🏷️ 路由与状态管理相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q useParams 拿到的是数字还是字符串？
A 字符串。URL 里的片段本质是文本，需要数值时手动 Number(id) 转换。
Q 参数变了组件会重新挂载吗？
A 不会。/users/1 → /users/2 只是 params 变化，组件复用实例；依赖 id 的数据请求要放在以 id 为依赖的 Effect 里。
Q 多个动态段怎么写？
A 路由 /users/:uid/posts/:pid 一次声明多个，useParams 返回 { uid, pid }。
