react router如何跳转

React Router 跳转方法

React Router 提供了多种方式实现页面跳转，适用于不同场景。以下是常用的跳转方法：

使用 <Link> 组件导航
通过声明式导航实现跳转，类似 HTML 的 <a> 标签，但不会触发页面刷新：

import { Link } from 'react-router-dom';
<Link to="/target-path">跳转到目标页</Link>

使用 useNavigate Hook（React Router v6）
在函数组件中通过编程式导航跳转：

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/target-path'); // 跳转
navigate(-1); // 返回上一页

使用 history.push（React Router v5及以下）
v5版本通过 history 对象跳转：

import { useHistory } from 'react-router-dom';
const history = useHistory();
history.push('/target-path');

重定向组件 <Navigate>
在渲染时自动触发跳转，适合条件跳转场景：

import { Navigate } from 'react-router-dom';
<Navigate to="/login" replace={true} />

路由跳转传参
通过 URL 参数或状态传递数据：

// URL参数
navigate('/user/123'); 

// 状态传递
navigate('/user', { state: { id: 123 } });

// 查询参数
navigate('/user?name=John');

注意事项

• replace 选项：跳转时替换历史记录而非新增（如 navigate('/path', { replace: true })）。
• 动态路由：需提前在路由配置中定义参数（如 /user/:id）。
• V5与V6差异：v6移除了 useHistory，统一使用 useNavigate。