当前位置：首页 > React

react怎么实现页面跳转

2026-01-27 13:11:55React

使用 React Router 实现页面跳转

React Router 是 React 生态中最常用的路由管理库，适用于单页应用（SPA）的页面跳转。安装最新版本的 react-router-dom（适用于 Web 应用）：

npm install react-router-dom

基本路由配置示例： 在根组件（如 App.js）中配置路由规则，通过 <Routes> 和 <Route> 定义路径与组件的映射关系。

react怎么实现页面跳转

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>
  );
}

编程式导航

通过 useNavigate Hook 在事件中触发跳转：

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

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

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

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

声明式导航

使用 <Link> 或 <NavLink> 组件实现点击跳转，避免页面刷新：

react怎么实现页面跳转

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

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

动态路由与参数传递

通过 URL 参数传递数据：

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

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

// 在目标组件中获取参数
import { useParams } from 'react-router-dom';
function UserProfile() {
  const { id } = useParams(); // id = '123'
}

重定向操作

使用 <Navigate> 组件或 navigate 函数实现条件重定向：

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

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

注意事项

路由模式选择：BrowserRouter 需要服务端支持（如 History API），静态站点可使用 HashRouter（URL 带 #）。
404 页面：通过 path="*" 捕获未匹配路径。
嵌套路由：在父路由组件中使用 <Outlet> 渲染子路由内容。

完整示例可参考 React Router 官方文档。