react 如何携带路由源信息
携带路由源信息的方法
在React中，可以通过路由库（如React Router）传递和携带路由源信息。以下是几种常见的方法：
使用路由参数
通过URL参数传递信息，适用于需要持久化的数据。
// 定义路由
<Route path="/user/:id" component={User} />
// 跳转时携带参数
history.push('/user/123');
// 组件中获取参数
const { id } = useParams();使用查询参数
通过URL查询字符串传递信息，适合非敏感数据。
// 跳转时携带查询参数
history.push('/user?id=123&name=John');
// 组件中获取查询参数
const query = new URLSearchParams(useLocation().search);
const id = query.get('id');
const name = query.get('name');使用状态传递
通过路由状态传递信息，适合临时或敏感数据。
// 跳转时携带状态
history.push('/user', { id: 123, name: 'John' });
// 组件中获取状态
const { state } = useLocation();
const { id, name } = state;使用自定义上下文
通过React Context传递全局路由信息，适合跨组件共享数据。
// 创建上下文
const RouteContext = React.createContext();
// 提供上下文值
<RouteContext.Provider value={{ source: 'dashboard' }}>
<App />
</RouteContext.Provider>
// 组件中消费上下文
const { source } = useContext(RouteContext);使用路由钩子
通过自定义路由钩子封装路由逻辑，简化信息传递。
// 自定义钩子
function useRouteSource() {
const location = useLocation();
return location.state?.source || 'default';
}
// 组件中使用
const source = useRouteSource();注意事项
- URL参数和查询参数会暴露在地址栏中，不适合传递敏感信息。
- 路由状态在页面刷新后会丢失，适合临时传递数据。
- 上下文适用于全局状态管理，但需注意性能影响。
