okgoes
🔍
← 目录从零开始学习React
✏️ 编辑

React 路由与导航

2024/9/21

React Router 是用于处理 React 应用中的路由和导航的一个库。通过 React Router，开发者可以轻松实现单页面应用（SPA）中的多页面导航、动态路由以及嵌套路由等功能。下面将介绍如何安装并使用 React Router，处理路由切换、动态路由、嵌套路由以及 404 页面。

1. React Router 的安装与基本使用

首先，需要安装 react-router-dom：

bash
npm install react-router-dom

或者：

bash
yarn add react-router-dom

1.1 基础路由配置

在 App.js 中使用 BrowserRouter、Routes 和 Route 组件来定义不同页面的路由。

jsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

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

export default App;
  • BrowserRouter：用于包裹整个路由系统。
  • Routes：包含所有的 Route 组件，每个 Route 组件用于定义一个路径和其对应的组件。
  • Link：用于导航，它渲染为 <a> 标签，并通过 to 属性指定要导航的路径。

2. 路由切换与动态路由

2.1 路由切换

React Router 通过 Link 和 useNavigate 实现页面的路由切换。

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

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

  const goToAbout = () => {
    navigate('/about');
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={goToAbout}>Go to About</button>
    </div>
  );
}

useNavigate 是一个 React Router 提供的 Hook，用于在不刷新页面的情况下导航到不同的路由。

2.2 动态路由

动态路由用于处理类似 /users/:id 这种路径，其中 :id 是动态变化的部分。可以通过 useParams Hook 获取动态路由参数。

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

function User() {
  const { id } = useParams(); // 获取 URL 中的 id 参数

  return <h2>User ID: {id}</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/users/:id" element={<User />} />  {/* 动态路由 */}
      </Routes>
    </Router>
  );
}

export default App;

在这个例子中，/users/:id 中的 id 是一个动态变量，访问 /users/123 将渲染出 User ID: 123。

3. 嵌套路由

嵌套路由用于在一个父路由中嵌入子路由。父路由和子路由可以共享布局或导航菜单。

3.1 嵌套路由示例

jsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li>
            <Link to="profile">Profile</Link>
          </li>
          <li>
            <Link to="settings">Settings</Link>
          </li>
        </ul>
      </nav>
      {/* 嵌套路由出口 */}
      <Outlet />
    </div>
  );
}

function Profile() {
  return <h3>Profile Page</h3>;
}

function Settings() {
  return <h3>Settings Page</h3>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="profile" element={<Profile />} />  {/* 嵌套路由 */}
          <Route path="settings" element={<Settings />} /> {/* 嵌套路由 */}
        </Route>
      </Routes>
    </Router>
  );
}

export default App;
  • Outlet：用于渲染嵌套路由的出口。父路由组件中定义的 Outlet 是子路由渲染的地方。
  • 在 /dashboard 路径下，可以通过点击 Profile 和 Settings 进行嵌套导航，而无需离开 Dashboard 页面。

4. 404 页面处理

当用户访问不存在的路由时，React Router 可以通过一个特殊的 Route 组件来渲染 404 页面。

4.1 404 页面示例

jsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function NotFound() {
  return <h2>404 - Page Not Found</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* 404 页面 */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;
  • path="*"：匹配所有未定义的路由，这意味着如果用户访问了未定义的路径，将会渲染 NotFound 组件。

总结

  • 安装 React Router：通过 npm install react-router-dom 安装。
  • 基础路由：使用 BrowserRouter、Routes、Route 和 Link 实现基本导航和路由切换。
  • 动态路由：通过 useParams 获取动态 URL 参数。
  • 嵌套路由：通过 Outlet 渲染嵌套的子路由。
  • 404 页面处理：通过定义 path="*" 的路由来处理未找到的页面。

React Router 提供了强大的路由功能，让你能够轻松构建多页面的单页应用（SPA），通过动态和嵌套路由等特性来创建更加复杂的路由结构。