当前位置：首页 > React

如何react页面跳转

2026-01-23 19:41:51React

使用 React Router 进行页面跳转

React Router 是 React 中最常用的路由管理库，支持声明式和编程式导航。

安装 React Router：

npm install react-router-dom

声明式导航（使用 Link 组件）：

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

function App() {
  return (
    <Link to="/about">跳转到关于页面</Link>
  );
}

编程式导航（使用 useNavigate 钩子）：

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

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

  return (
    <button onClick={() => navigate('/about')}>跳转</button>
  );
}

配置路由表

在根组件中配置路由表：

如何react页面跳转

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

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

动态路由跳转

带参数的跳转：

navigate('/user/123'); // 跳转到动态路由

在目标组件中获取参数：

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

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

重定向操作

使用 Navigate 组件进行重定向：

如何react页面跳转

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

function ProtectedRoute() {
  const isAuth = false;
  return isAuth ? <Dashboard /> : <Navigate to="/login" />;
}

编程式重定向：

navigate('/login', { replace: true });

路由跳转传参

通过 state 传递参数：

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

在目标组件获取参数：

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

function About() {
  const location = useLocation();
  console.log(location.state.fromHome);
}

路由守卫实现

通过高阶组件实现权限控制：

function PrivateRoute({ children }) {
  const auth = useAuth();
  return auth ? children : <Navigate to="/login" />;
}

// 使用方式
<Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />