react router如何跳转
React Router 跳转方法
在 React Router（v6 版本）中，跳转页面可以通过多种方式实现，以下是常见的几种方法：
1. 使用 Link 组件导航
Link 是 React Router 提供的声明式导航组件，适用于点击跳转场景。
import { Link } from 'react-router-dom';
function MyComponent() {
return (
<Link to="/target-path">跳转到目标页</Link>
);
}2. 使用 useNavigate Hook 编程式导航
通过 useNavigate Hook 可以在事件处理或逻辑中动态跳转。
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/target-path'); // 跳转到目标路径
navigate(-1); // 返回上一页
};
return <button onClick={handleClick}>跳转</button>;
}3. 路由重定向 Navigate 组件
适用于条件跳转（如权限验证后自动跳转）。
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isAuth }) {
return isAuth ? <Dashboard /> : <Navigate to="/login" replace />;
}4. 传递状态参数
跳转时可携带状态（state），目标页面通过 useLocation 获取。
// 跳转时传递参数
navigate('/target-path', { state: { id: 123 } });
// 目标页面获取参数
import { useLocation } from 'react-router-dom';
const location = useLocation();
console.log(location.state.id); // 123注意事项
- 路由版本差异：v5 使用
useHistory，v6 改为useNavigate。 replace选项：默认跳转是 push 模式（保留历史记录），添加replace: true会替换当前历史记录。- 动态路由参数：路径如
/user/:id，目标页面通过useParams获取参数。
