当前位置：首页 > React

react router如何跳转

2026-01-23 19:40:22React

React Router 跳转方法

在 React Router（v6 版本）中，跳转页面可以通过多种方式实现，以下是常见的几种方法：

1. 使用 Link 组件导航 Link 是 React Router 提供的声明式导航组件，适用于点击跳转场景。

react router如何跳转

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

function MyComponent() {
  return (
    <Link to="/target-path">跳转到目标页</Link>
  );
}

2. 使用 useNavigate Hook 编程式导航 通过 useNavigate Hook 可以在事件处理或逻辑中动态跳转。

react router如何跳转

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