react route 如何跳转

使用 useNavigate Hook（React Router v6）

在 React Router v6 中，推荐使用 useNavigate Hook 进行编程式导航。
导入 Hook 并调用返回的 navigate 函数，传入目标路径或配置对象：

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  // 跳转到指定路径
  navigate('/target-path');

  // 跳转并传递状态
  navigate('/target-path', { state: { data: 'example' } });

  // 返回上一页
  navigate(-1);
}

使用 <Navigate> 组件（React Router v6）

通过 <Navigate> 组件实现条件渲染跳转。
当组件渲染时，会自动重定向到指定路径：

import { Navigate } from 'react-router-dom';

function ProtectedRoute({ isLoggedIn }) {
  return isLoggedIn ? <Dashboard /> : <Navigate to="/login" replace />;
}

使用 useHistory Hook（React Router v5）

在 React Router v5 中，使用 useHistory Hook 进行跳转：

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  // 跳转到指定路径
  history.push('/target-path');

  // 替换当前历史记录
  history.replace('/target-path');

  // 返回上一页
  history.goBack();
}

使用 <Link> 或 <NavLink> 组件

通过声明式导航组件实现页面跳转：

import { Link, NavLink } from 'react-router-dom';

// 普通跳转
<Link to="/target-path">跳转</Link>

// 带样式的跳转（激活时添加类名）
<NavLink to="/target-path" activeClassName="active">跳转</NavLink>

路由跳转传参

URL 参数传递
通过路径直接传递参数：

navigate('/user/123'); // 跳转到动态路由 /user/:id

查询参数传递
使用 URLSearchParams 或手动拼接：

navigate(`/search?query=${encodeURIComponent('keyword')}`);

状态传递
通过 state 传递复杂数据：

navigate('/target', { state: { from: 'home', data: {} } });

在目标组件中通过 useLocation 获取状态：

const location = useLocation();
console.log(location.state); // { from: 'home', data: {} }

注意事项

• v6 与 v5 差异：React Router v6 移除了 useHistory，改用 useNavigate。
• replace 模式：navigate(path, { replace: true }) 会替换历史记录，而非新增。
• 相对路径：v6 支持相对路径跳转（如 navigate('../parent')）。