当前位置：首页 > React

react如何路由跳转

2026-01-23 17:24:52React

使用 React Router 进行路由跳转

React Router 是 React 生态中最常用的路由管理库，支持多种路由跳转方式。以下是常见的几种方法：

安装 React Router

npm install react-router-dom

声明式导航（使用 `<Link>` 组件）

通过 <Link> 组件实现跳转，类似于 HTML 的 <a> 标签，但不会触发页面刷新：

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

function NavBar() {
  return (
    <nav>
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

编程式导航（使用 `useNavigate` Hook）

在函数组件中通过 useNavigate Hook 实现动态跳转：

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

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

  const handleLogin = () => {
    navigate('/dashboard'); // 跳转到指定路径
    // navigate(-1); // 返回上一页
  };

  return <button onClick={handleLogin}>Login</button>;
}

路由参数传递

跳转时传递参数

navigate('/user', { state: { id: 123 } }); // 通过 state 传递
navigate('/user/123'); // 通过 URL 参数传递

获取参数

// 获取 state 参数
const location = useLocation();
const { id } = location.state;

// 获取 URL 参数（需配置动态路由）
const { id } = useParams(); // 假设路由为 /user/:id

动态路由配置

在路由配置中定义参数：

<Route path="/user/:id" element={<UserProfile />} />

重定向（使用 `<Navigate>` 组件）

通过条件渲染 <Navigate> 实现重定向：

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

function PrivateRoute({ isAuthenticated }) {
  return isAuthenticated ? <Dashboard /> : <Navigate to="/login" />;
}

路由守卫（权限控制）

结合自定义逻辑实现权限控制：

function ProtectedRoute({ children }) {
  const auth = useAuth();
  const location = useLocation();

  if (!auth.user) {
    return <Navigate to="/login" state={{ from: location }} />;
  }

  return children;
}