react如何给路由添加信息
在 React 中给路由添加信息的方法
使用 react-router-dom 的 state 属性传递信息
通过 Link 或 Navigate 组件的 state 属性可以在路由跳转时传递额外信息。接收方通过 useLocation 钩子获取传递的数据。
import { Link, useLocation } from 'react-router-dom';
// 发送方
<Link to="/target-path" state={{ customData: 'value' }}>跳转</Link>
// 接收方
const location = useLocation();
console.log(location.state.customData); // 输出: 'value'通过 URL 参数传递信息
使用动态路由参数或查询参数（query string）传递信息，适合需要持久化或分享的简单数据。
// 配置动态路由
<Route path="/user/:id" element={<UserPage />} />
// 跳转时传递参数
<Link to="/user/123">用户页</Link>
// 接收方通过 useParams 获取
const { id } = useParams(); // id = '123'使用路由上下文共享复杂数据
通过 React Context 或状态管理库（如 Redux）存储路由相关数据，适用于跨组件共享复杂状态。
// 创建上下文
const RouteDataContext = createContext();
// 在路由组件中提供数据
<RouteDataContext.Provider value={{ data: 'value' }}>
<Routes>...</Routes>
</RouteDataContext.Provider>
// 子组件通过 useContext 获取
const routeData = useContext(RouteDataContext);自定义路由配置扩展元信息
在路由配置对象中添加自定义字段（如权限、标题等），通过遍历路由配置实现逻辑控制。
const routes = [
{
path: '/admin',
element: <AdminPage />,
meta: { requiresAuth: true, title: '管理后台' }
}
];
// 渲染时读取 meta 信息
routes.map(route => (
<Route
key={route.path}
path={route.path}
element={route.meta.requiresAuth ? <AuthWrapper>{route.element}</AuthWrapper> : route.element}
/>
));使用路由拦截器注入信息
通过自定义路由组件或高阶组件，在路由匹配时动态附加信息。
const WithRouteData = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={(props) => <Component {...props} extraData="injected-value" />}
/>
);
// 使用方式
<WithRouteData path="/special" component={SpecialPage} />注意事项
state属性传递的数据不会出现在 URL 中，刷新页面后会丢失。- URL 参数适合必要标识信息，但复杂对象需要序列化。
- 上下文适合全局共享数据，但需注意性能优化。
- 动态路由参数需在路由配置中明确定义（如
:id）。 - 查询参数可通过
useSearchParams钩子管理。
