react如何页面跳转

使用 React Router 进行页面跳转

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

安装 React Router

npm install react-router-dom

基本路由配置 在 App.js 或入口文件中配置路由：

import { BrowserRouter as Router, Route, Routes } 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>
  );
}

通过 Link 组件跳转

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

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

function Home() {
  return (
    <div>
      <Link to="/about">跳转到 About 页</Link>
    </div>
  );
}

通过编程式导航跳转

使用 useNavigate Hook 在事件中跳转：

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

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

  const handleClick = () => {
    navigate('/about'); // 跳转到 About 页
    // navigate(-1);     // 返回上一页
  };

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

通过 Redirect 组件跳转（v5 及以下）

在 React Router v6 中已移除 Redirect，改用 Navigate：

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

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

动态路由跳转

传递参数并跳转到动态路由：

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

// 获取参数：
import { useParams } from 'react-router-dom';
function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

跳转时传递状态

通过 state 传递数据：

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

// 接收状态：
import { useLocation } from 'react-router-dom';
function About() {
  const location = useLocation();
  console.log(location.state.fromHome); // true
}

使用 NavLink 高亮当前链接

NavLink 可自动添加激活状态的类名：

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

<NavLink 
  to="/about"
  className={({ isActive }) => isActive ? 'active' : ''}
>
  About
</NavLink>

注意事项

• React Router v6 移除了 useHistory，改用 useNavigate。
• 确保跳转逻辑在组件渲染周期外调用（如事件回调中）。
• 动态路由参数需在目标组件中通过 useParams 获取。

通过以上方法可以实现 React 应用的页面跳转，具体选择取决于场景需求。