当前位置：首页 > React

react如何写跳转

2026-03-10 16:10:01React

使用 React Router 进行页面跳转

React 中实现页面跳转通常使用 react-router-dom 库，以下是常见的几种方法：

安装依赖

npm install react-router-dom

使用 `Link` 组件跳转

Link 是 React Router 提供的导航组件，不会触发页面刷新：

react如何写跳转

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('/profile', { state: { userId: 123 } });

    // 替换当前历史记录
    navigate('/settings', { replace: true });
  };

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

使用 `Navigate` 组件重定向

Navigate 组件会在渲染时立即执行跳转：

react如何写跳转

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

function ProtectedRoute({ isAuthenticated, children }) {
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  return children;
}

路由配置示例

基础路由配置示例：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/users/:id" element={<UserProfile />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </BrowserRouter>
  );
}

获取路由参数

在目标组件中获取路由参数：

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

function UserProfile() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

获取路由状态

获取跳转时传递的 state 数据：

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

function ProfilePage() {
  const location = useLocation();
  const { userId } = location.state || {};
  return <div>User ID: {userId}</div>;
}

这些方法覆盖了 React 中页面跳转的主要场景，可以根据具体需求选择合适的方式。