当前位置：首页 > React

react实现页面跳转

2026-01-26 22:49:17React

使用 React Router 实现页面跳转

React Router 是 React 生态中最常用的路由管理库，适用于单页面应用（SPA）的导航。以下是几种常见的页面跳转方式：

安装 React Router

npm install react-router-dom

基本路由配置 在项目入口文件（如 App.js）中配置路由：

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

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

编程式导航

通过 useNavigate Hook 实现跳转：

react实现页面跳转

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

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

  const handleClick = () => {
    navigate('/about'); // 跳转到关于页
    navigate('/about', { replace: true }); // 替换当前历史记录
    navigate(-1); // 返回上一页
  };

  return <button onClick={handleClick}>跳转</button>;
}

声明式导航

使用 <Link> 或 <NavLink> 组件：

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

function NavBar() {
  return (
    <nav>
      <Link to="/">首页</Link>
      <NavLink to="/about" activeClassName="active">关于</NavLink>
    </nav>
  );
}

NavLink 会自动为当前激活的路由添加样式类。

路由传参

URL 参数传递

react实现页面跳转

// 路由配置
<Route path="/user/:id" element={<User />} />

// 跳转时传递
navigate('/user/123');

// 组件中获取
import { useParams } from 'react-router-dom';
function User() {
  const { id } = useParams();
}

状态参数传递

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

// 目标组件获取
import { useLocation } from 'react-router-dom';
function About() {
  const { state } = useLocation();
}

重定向处理

使用 <Navigate> 组件实现条件重定向：

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

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

路由守卫

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

function PrivateRoute({ children }) {
  const auth = useAuth(); // 自定义认证逻辑
  return auth ? children : <Navigate to="/login" />;
}

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

以上方法覆盖了 React 中页面跳转的主要场景，根据具体需求选择合适的方式。React Router v6 的 API 设计更加简洁，建议在新项目中直接使用最新版本。