React 路由配置全解析：从多页应用到单页应用

鸡腿大王
188 阅读4分钟

在前端开发中，路由管理是实现页面切换和导航的重要部分。React 作为流行的前端框架，使用 React Router 来处理单页应用（SPA）中的路由管理。本文将结合实际代码示例，讲解如何在 React 中配置和使用路由。

0341DB58.gif

1. 多页应用 VS 单页应用

传统的多页应用（MPA）每次用户请求一个新页面时，浏览器会重新加载整个页面。而在单页应用（SPA）中，整个应用只加载一次 HTML，页面内容的切换是通过 JavaScript 动态加载的。SPA 通过 React Router 来实现 URL 和页面组件的映射，只有在 URL 改变时，React Router 才会加载不同的组件，避免了页面的重加载。

例如，当用户访问以下 URL：

  • http://localhost:5173/home —— 显示首页组件
  • http://localhost:5173/about —— 显示关于页面组件

React Router 会根据 URL 改变，加载并渲染对应的组件，而无需刷新整个页面。

03423976.gif

2. React Router 路由配置详解

React Router 提供了一些核心组件来帮助我们配置和管理路由，下面详细介绍这些组件及其使用方式。

2.1 BrowserRouter：路由模式

在 React 中，BrowserRouter 是一个容器组件，它通过 HTML5 的 History API 实现路由的无刷新跳转。BrowserRouter 需要包裹整个应用，这样 React Router 才能识别和响应 URL 变化。

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 配置路由 */}
      </Routes>
    </BrowserRouter>
  );
}

2.2 Routes：路由配置容器

Routes 组件是一个路由配置的容器，它包含了多个 Route 配置项。每个 Route 都对应一个 URL 路径和一个组件，当 URL 路径匹配时，React Router 会渲染对应的组件。

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

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

2.3 Route：路由配置项

03427DE2.gif Route 组件是最基本的路由配置项。它通过 path 属性指定 URL 路径，通过 element 属性指定匹配路径时要渲染的组件。

<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />

2.4 Outlet：二级路由出口

当我们有嵌套路由时，Outlet 组件用于渲染嵌套的子路由组件。父路由匹配时，Outlet 会渲染子路由组件。

0342D5A6.gif 例如，我们有一个包含多个子页面的“用户”页面：

<Route path="/user" element={<User />}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

在 User 组件中，我们使用 Outlet 来渲染 Profile 和 Settings：

function User() {
  return (
    <div>
      <h2>User Page</h2>
      <Outlet />  {/* 子路由渲染位置 */}
    </div>
  );
}

2.5 Link：导航链接

03433683.gif 在单页应用中，我们使用 Link 组件来实现页面跳转，而不是传统的 <a> 标签。Link 组件会通过 React Router 来进行路由跳转，从而避免页面刷新。

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

function Navbar() {
  return (
    <nav>
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

2.6 useNavigate：路由跳转

03435AA5.gif useNavigate 是 React Router 提供的 hook，可以在组件中编程式地跳转到指定的路由。通过 useNavigate，我们可以通过 JavaScript 动态控制路由跳转。

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

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

  const handleClick = () => {
    navigate('/about');  // 编程式跳转到 "about" 页面
  };

  return <button onClick={handleClick}>Go to About</button>;
}

3. 页面与组件的关系

0343B057.gif 在 React 项目中，页面和组件是两个不同的概念：

  • 页面（Page） ：配置路由的组件被称为页面。每个页面通常对应一个独立的 URL 路径。
  • 组件（Component） ：没有直接配路由的组件，通常作为页面的子组件进行展示。

例如，Home 和 About 是页面组件，而 Navbar、Footer 等则是一般的组件。

4. 完整代码示例

0343FFCE.gif 以下是基于上述概念和 React Router 配置的实际代码示例，写了一个简单的后台管理系统，展示了如何在项目中配置和使用 React Router。

4.1 App.jsx

03442E60.gif

// App.jsx
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Login from './views/login/Login';
import Home from './views/Home/Home';
import Class from './views/class/Class';
import Leetcode from './views/leetcode/Leetcode';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navigate to="/login" />} />
        <Route path="/login" element={<Login />} />
        <Route path="/home" element={<Home />}>
          <Route path="/home" element={<Navigate to="/home/class" />} />
          <Route path="/home/leetcode" element={<Leetcode />} />
          <Route path="/home/class" element={<Class />} />
        </Route>
        <Route path="*" element={<h2>404 Not Found</h2>} />
      </Routes>
    </BrowserRouter>
  );
}

4.2 Home.jsx

03446649.gif

// Home.jsx
import './home.css';
import { Outlet } from 'react-router-dom';
import { Link } from 'react-router-dom';

export default function Home() {
  return (
    <div>
      <div className="header">
        <span>后台管理系统</span>
        <span>admin</span>
      </div>
      <main className="body">
        <aside className="aside">
          <ul>
            <li><Link to="/home/class">课程</Link></li>
            <li><Link to="/home/leetcode">算法</Link></li>
          </ul>
        </aside>
        <main className="container">
          <div className="content">
            <Outlet />
          </div>
        </main>
      </main>
    </div>
  );
}

4.3 登录页面 (Login.jsx)

0344A97C.gif

// Login.jsx
import './login.css';
import { useNavigate } from 'react-router-dom';

export default function Login() {
  const navigate = useNavigate();
  const login = () => {
    navigate('/home?id=123');  // 登录成功后跳转到首页
  };

  return (
    <div className="login">
      <div className="login-container">
        <h2>后台管理系统</h2>
        <div className="item">
          <label>账号:</label>
          <input type="text" placeholder="请输入账号" />
        </div>
        <div className="item">
          <label>密码:</label>
          <input type="password" placeholder="请输入密码" />
        </div>
        <div className="item">
          <button onClick={login}>登录</button>
        </div>
      </div>
    </div>
  );
}

5. 总结

03451D54.gif React Router 是管理 React 单页应用中路由和页面切换的重要工具。通过 BrowserRouter、Routes、Route、Link 等组件，你可以轻松地配置和管理页面跳转。而通过 useNavigate 等 API，你可以更加灵活地控制路由跳转。

希望这篇文章能帮助你更好地理解 React 路由的工作原理。如果你有任何问题，欢迎在评论区留言讨论。

avatar
文章
阅读
粉丝