当前位置：首页 > React

页面之间如何跳转react

2026-01-24 11:10:38React

使用 React Router 进行页面跳转

React Router 是 React 生态中最常用的路由库，用于实现单页应用（SPA）的页面跳转。安装 React Router DOM 包：

npm install react-router-dom

在应用中配置路由，使用 BrowserRouter 包裹整个应用，并通过 Routes 和 Route 定义路径与组件的映射关系：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

通过 Link 组件导航

在组件中使用 Link 实现声明式导航，避免页面刷新：

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

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/about">Go to About</Link>
    </div>
  );
}

编程式导航

通过 useNavigate Hook 在事件处理函数中实现编程式跳转：

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

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

  const handleClick = () => {
    navigate("/about");
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

动态路由与参数传递

定义动态路由路径并传递参数：

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

通过 useParams 获取路由参数：

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

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

通过 navigate 传递状态：

navigate("/about", { state: { fromHome: true } });

在目标组件中通过 useLocation 获取状态：

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

function About() {
  const location = useLocation();
  const { fromHome } = location.state || {};
  return <h1>About {fromHome && "(from Home)"}</h1>;
}

重定向

使用 Navigate 组件实现重定向：

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

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

嵌套路由

通过嵌套 Route 实现布局层级：

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<DashboardHome />} />
  <Route path="settings" element={<DashboardSettings />} />
</Route>

在布局组件中使用 Outlet 渲染子路由：

页面之间如何跳转react

import { Outlet } from "react-router-dom";

function DashboardLayout() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}