当前位置：首页 > React

使用react如何跳转页面跳转

2026-03-11 09:16:29React

使用 React Router 进行页面跳转

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

安装依赖

npm install react-router-dom

使用 `<Link>` 组件跳转

<Link> 是声明式导航，适用于点击链接跳转的场景：

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

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

使用 `useNavigate` Hook 编程式跳转

在函数组件中，可以使用 useNavigate 进行编程式导航：

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>` 组件重定向

在组件渲染时进行重定向：

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 />} />
      </Routes>
    </BrowserRouter>
  );
}

获取路由参数

在目标页面获取动态路由参数或查询参数：

使用react如何跳转页面跳转

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

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

  // 获取location state
  const location = useLocation();
  const stateData = location.state;

  return <div>User ID: {id}</div>;
}