7. React Router 路由页面导航 基础知识

React Router 路由页面导航 基础知识

React 路由（React Router）是一个用于在 React 应用中实现 页面导航 的 库。它允许你通过 不同的 URL 来 渲染不同的组件，从而实现 单页应用（SPA）的 导航 和 视图切换。

React Router 提供了一些 组件 和 钩子，使得你可以在应用中轻松地 管理路由（即 URL 与 组件 之间的 映射）。

1 主要概念

• Route：定义 了某个 路径 与 对应组件 之间的 映射关系；
• Link：用于 创建 可点击的 链接，点击后会触发 路由切换；
• BrowserRouter 和 HashRouter：两种不同的 路由器（router），BrowserRouter 基于浏览器的 History API，而 HashRouter 使用 URL 的 hash 部分；
• useNavigate、useParams、useLocation 等：用于 在组件中 处理 路由逻辑 的 钩子函数。

2 基本使用示例

2.1 设置路由

1. 在 React 应用中，首先需要在 顶层组件（通常是 App.js 或 App.tsx）中使用 BrowserRouter 包裹 整个应用；
2. 然后通过 Route 组件 定义 路径 与 组件 之间的 映射关系。路径 的定义 使用 path 属性，而 element 属性 指定 要渲染的 组件。

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 Contact() {
  return <h2>Contact Page</h2>;
}

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

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

export default App;

示例-组件说明

• BrowserRouter：包裹 整个应用，提供 路由上下文；
• Routes：用于 包装多个 Route，它会根据当前的 URL 匹配 相应的 Route 并渲染 对应的 组件；
• Route：每个 Route 都有一个 path 属性 和 element 属性，path 定义了 URL 路径，element 定义了该路径 对应渲染的 组件；
• Link：提供一种方式来 切换路由，点击时 不会刷新页面。

示例-路由工作方式说明

• 当用户点击 Home 链接 时，/ 路径 对应的 组件 Home 会被 渲染；
• 当点击 About 链接 时，/about 路径 对应的 组件 About 会被 渲染；
• 当点击 Contact 链接 时，/contact 路径 对应的 组件 Contact 会被 渲染。

2.2 嵌套路由

React Router 也支持 嵌套路由，即 一个组件 可以包含 其他子组件 的 路由。

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

function Home() {
  return (
    <div>
      <h2>Home Page</h2>
      <nav>
        <ul>
          <li>
            <Link to="/home/overview">Overview</Link>
          </li>
          <li>
            <Link to="/home/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="overview" element={<Overview />} />
        <Route path="contact" element={<Contact />} />
      </Routes>
    </div>
  );
}

function Overview() {
  return <h3>Overview</h3>;
}

function Contact() {
  return <h3>Contact</h3>;
}

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

        <Routes>
          <Route path="/home/*" element={<Home />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

• 嵌套路由：Home 组件 有 自己的路由（/home/overview 和 /home/contact）。这些子路由 在 Home 组件中 定义，并通过 Routes 嵌套；
• * 通配符：用于 捕获 /home 路径下 的 所有子路由。

3 动态路由与参数

你可以 在路径中 使用 动态参数，例如 /user/:id，然后 在组件中 通过 useParams 获取 这些 动态参数。

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

function User() {
  const { id } = useParams();  // 获取路由中的动态参数
  return <h2>User ID: {id}</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/user/123">User 123</Link>
            </li>
            <li>
              <Link to="/user/456">User 456</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/user/:id" element={<User />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

• 动态路由：/user/:id/:name 这个路径是一个 动态路由，其中 :id 是一个 参数；
• useParams：在 User 组件中，使用 useParams 钩子 来获取 路由中的 id 参数。

4 编程式导航

有时候你需要 在代码中 执行导航，比如 点击按钮后 跳转到另一个页面。useNavigate 钩子 提供了这种功能。

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

function User() {
  // 使用 useLocation 获取通过编程式导航传递的 state
  const location = useLocation();
  const { id, name } = location.state || {};

  return (
    <div>
      <h2>User Details</h2>
      <p>ID: {id}</p>
      <p>Name: {name}</p>
    </div>
  );
}

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

  const goToUser = () => {
    // 编程式导航传递多个参数
    navigate('/user', { state: { id: 123, name: 'Alice' } });
  };

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

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

export default App;

useNavigate：我们在 Home 组件中 使用 useNavigate 钩子 来获取 navigate 函数。通过调用 navigate('/user')，可以在代码中 触发 路由跳转，而不需要 用户点击链接。

• 传递参数：使用 navigate('/user', { state: { id: 123, name: 'Alice' } })，state 是一个 对象，可以包含多个 键值对；
• 参数获取：在目标组件（User）中使用 useLocation 钩子，useLocation().state 包含导航时传递的 所有参数。

5 路由和编程式导航 传参对比