一、React Router URL 参数概述1.1 什么是 URL 参数在 React 单页应用开发中路由参数是组件间数据传递的重要手段之一。所谓 URL 参数指的是附加在浏览器地址栏 URL 上的动态片段或查询字符串React Router 会将其解析并注入到对应的路由组件中。URL 参数的典型场景包括详情页根据 id 加载数据、列表页根据 keyword 过滤、分页组件传递 page 与 size、多语言切换通过 lang 参数等。掌握各类参数的获取方式是构建复杂路由应用的基础能力。1.2 URL 参数的分类React Router 中的 URL 参数主要分为三大类动态路由参数形如 /user/:id 中的 id 部分通过路径模板定义。查询字符串参数形如 /search?keywordreactpage2 中问号后面的部分。location state通过路由跳转 API 携带的隐式状态对象不在 URL 中体现。1.3 React Router 版本说明当前主流版本为 React Router v6其 API 与 v5 有较大差异。v6 移除了 withRouter引入了 useSearchParams并对 useParams 的行为做了优化。本文以 v6 为主进行讲解并在末尾补充 v5 的兼容写法。动态路由/user/:id查询字符串?keyval跳转携带state用户访问 URLURL 类型判断useParams 解析useSearchParams 解析useLocation.state 读取获取 id 等动态字段获取查询键值对获取隐式状态业务逻辑处理二、获取动态路由参数2.1 配置动态路由在 React Router v6 中动态路由通过在路由路径中使用冒号语法来声明。例如要展示用户详情可在路由配置中写入 /user/:id其中 id 即为动态参数名。import { BrowserRouter, Routes, Route } from react-router-dom; function App() { return ( BrowserRouter Routes Route path/user/:id element{UserDetail /} / Route path/post/:category/:slug element{PostDetail /} / /Routes /BrowserRouter ); }2.2 使用 useParams HookuseParams 是 React Router 提供的核心 Hook用于在函数组件中读取当前路由匹配到的动态参数。它返回一个对象键为参数名值为字符串。import { useParams } from react-router-dom; function UserDetail() { const { id } useParams(); return div当前用户 ID: {id}/div; }对于多段动态参数例如 /post/:category/:slug可以一次性解构出多个字段const { category, slug } useParams();2.3 完整示例代码下面给出一个结合数据请求的完整示例展示参数变化时如何重新获取数据import { useEffect, useState } from react; import { useParams } from react-router-dom; function UserDetail() { const { id } useParams(); const [user, setUser] useState(null); useEffect(() { fetch(/api/users/${id}) .then(res res.json()) .then(data setUser(data)); }, [id]); if (!user) return div加载中.../div; return ( div h1{user.name}/h1 p{user.email}/p /div ); }注意useParams 返回的值始终为字符串若需数值运算请使用 Number(id) 进行转换否则容易出现 1 1 等于 11 的字符串拼接问题。三、获取查询字符串参数3.1 使用 useSearchParams HookuseSearchParams 是 React Router v6 新增的 Hook用于读写 URL 查询字符串。它返回一个包含两个元素的数组第一个是 URLSearchParams 实例第二个是更新函数。import { useSearchParams } from react-router-dom; function SearchPage() { const [searchParams, setSearchParams] useSearchParams(); const keyword searchParams.get(keyword); const page searchParams.get(page) || 1; return ( div p关键词: {keyword}/p p页码: {page}/p /div ); }3.2 解析查询参数URLSearchParams 提供了多种方法来访问查询参数get(name)返回第一个匹配的值不存在时返回 null。getAll(name)返回所有同名参数的数组。has(name)判断是否存在该参数。entries()、keys()、values()用于遍历。const [searchParams] useSearchParams(); // 多值参数场景如 ?tagreacttagfrontend const tags searchParams.getAll(tag); // 遍历所有参数 for (const [key, value] of searchParams.entries()) { console.log(key, value); }3.3 修改查询参数通过 setSearchParams 可以更新查询字符串支持传入对象或 URLSearchParams 实例const [searchParams, setSearchParams] useSearchParams(); const goToNextPage () { const currentPage Number(searchParams.get(page) || 1); setSearchParams({ page: currentPage 1 }); }; // 仅更新部分参数保留其他参数 const updateKeyword (kw) { const next new URLSearchParams(searchParams); next.set(keyword, kw); setSearchParams(next); };useSearchParams读取 get/getAll判断 has修改 set/append删除 deletesetSearchParams 触发重渲染URL 同步更新四、获取 location 信息4.1 useLocation Hook 简介useLocation 返回当前 location 对象包含 pathname、search、hash、state、key 等字段。它是获取完整路由信息的入口。import { useLocation } from react-router-dom; function LocationInfo() { const location useLocation(); console.log(location); return null; }4.2 获取完整路径当需要同时处理 pathname 与 search 时可以拼接使用const location useLocation(); const fullPath location.pathname location.search; // 例如 /search?keywordreactpage2若要解析 hash 锚点可通过 location.hash 获取例如 #section1。4.3 获取 state 状态通过 Link 或 navigate 跳转时可携带 state该数据不会出现在 URL 中刷新页面后通常会丢失。import { useNavigate } from react-router-dom; function List() { const navigate useNavigate(); const goDetail () { navigate(/user/1, { state: { from: list, referrer: home } }); }; return button onClick{goDetail}查看详情/button; } // 在目标组件中读取 function UserDetail() { const location useLocation(); const state location.state; return div来源: {state?.from}/div; }五、类组件与兼容方案5.1 v6 中的类组件方案React Router v6 移除了 withRouter类组件需借助函数组件包装或自定义高阶组件来获取路由参数。import { useParams } from react-router-dom; function withRouter(Component) { return function (props) { const params useParams(); return Component {...props} params{params} /; }; } class UserDetail extends React.Component { render() { const { id } this.props.params; return div用户 ID: {id}/div; } } export default withRouter(UserDetail);5.2 自定义 Hook 封装为统一管理参数获取逻辑可封装通用 Hookimport { useParams, useSearchParams, useLocation } from react-router-dom; function useRouteParams() { const params useParams(); const [searchParams, setSearchParams] useSearchParams(); const location useLocation(); return { params, searchParams, setSearchParams, location }; }5.3 React Router v5 兼容写法若项目仍使用 v5可通过 useLocation 配合 qs 库解析查询字符串动态参数仍用 useParamsimport { useParams, useLocation } from react-router-dom; import qs from qs; function SearchPage() { const { id } useParams(); const location useLocation(); const query qs.parse(location.search, { ignoreQueryPrefix: true }); return div{query.keyword}/div; }六、实战总结与最佳实践6.1 场景对比参数获取场景路径必选参数查询可选参数隐式状态数据useParamsuseSearchParamsuseLocation.state适合资源标识适合过滤分页适合临时传递6.2 常见错误在未匹配动态路由的组件中调用 useParams结果为空对象。误以为 useParams 返回数字直接进行运算导致字符串拼接。使用 setSearchParams 传入对象会覆盖所有参数需先克隆原 searchParams。在类组件中直接调用 Hook 报错必须通过高阶组件包装。忘记将参数加入 useEffect 依赖数组导致数据不更新。6.3 最佳实践资源标识类参数使用动态路由例如 /user/:id。过滤、排序、分页类参数使用查询字符串便于分享与刷新保留。敏感或临时数据使用 state避免暴露在 URL 中。参数变化触发副作用时务必将参数加入 useEffect 依赖数组。对数值型参数进行校验与转换防止 NaN 影响业务逻辑。封装统一的参数获取 Hook提升代码可维护性与一致性。掌握上述方法后在 React Router 中如何获取 URL参数? 将不再成为开发难题无论是动态路由、查询字符串还是隐式状态都能根据场景灵活选用合适的 Hook构建出可维护、可分享、可预测的路由体系。
)
