当前位置：首页 > React

react route 如何跳转

2026-01-24 01:37:58React

使用 `useNavigate` Hook（React Router v6）

在函数组件中，可以通过 useNavigate Hook 实现编程式导航。引入 useNavigate 后调用返回的函数，传入目标路径即可跳转。

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

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

  // 跳转到指定路径
  const handleClick = () => {
    navigate('/target-path');
  };

  return <button onClick={handleClick}>跳转</button>;
}

支持传递 state 或替换历史记录：

navigate('/target-path', { state: { id: 1 }, replace: true });

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

通过渲染 <Navigate> 组件可实现条件跳转。当该组件被渲染时，会自动触发导航。

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

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

使用 `useHistory` Hook（React Router v5）

在 v5 版本中，使用 useHistory Hook 的 push 或 replace 方法跳转：

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

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

  const handleClick = () => {
    history.push('/target-path');
    // 或 history.replace('/target-path');
  };

  return <button onClick={handleClick}>跳转</button>;
}

使用 `<Link>` 或 `<NavLink>` 组件

声明式导航组件，适用于点击链接跳转的场景：

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

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

// 带样式的链接（激活时添加类名）
<NavLink 
  to="/target-path" 
  className={({ isActive }) => isActive ? 'active' : ''}
>
  跳转
</NavLink>

路由参数与动态跳转

跳转时传递参数（如动态路由或查询参数）：

// 动态路由参数
navigate('/user/123');

// 查询参数
navigate('/search?keyword=react');

// 通过 state 传递隐式参数
navigate('/detail', { state: { id: 1 } });

在目标组件中通过 useParams 或 useLocation 获取参数：

react route 如何跳转

// 获取动态路由参数
const { id } = useParams();

// 获取 state 或查询参数
const { state, search } = useLocation();

注意事项

v6 与 v5 差异：v6 移除了 useHistory，改用 useNavigate；<Redirect> 被 <Navigate> 替代。
相对路径：v6 支持相对于当前路由的路径（如 navigate('child')）。
性能优化：避免在渲染过程中直接调用导航方法，应在事件回调或副作用中处理。