了解 React Router 基础知识：在 React 中管理导航

React Router 基础教程

React Router 是一个功能强大的库，用于在 React 应用中实现路由功能。它允许开发者定义应用内的路由，并管理不同视图或组件间的导航。通过处理动态路由和基于 URL 的导航，React Router 简化了单页应用 (SPA) 的创建。

React Router 核心概念

1. 路由 (Route): 应用内从一个 URL 导航到另一个 URL 的过程。
2. 单页应用 (SPA): React Router 专为 SPA 设计，应用只加载一次，用户导航时只更新部分页面内容。

React Router 核心组件

1. BrowserRouter (或 HashRouter):
   • 用于管理路由逻辑的容器组件，启用导航功能。
   • BrowserRouter 使用 HTML5 History API 操作浏览器 URL 并保持 UI 同步。
   • 对于不支持 HTML5 History API 的旧浏览器，可以使用 HashRouter (基于哈希的路由)。

示例:

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

const App = () => {
  return (
    <BrowserRouter><Routes /></BrowserRouter>
  );
};

2. Routes:
   • 定义应用内所有路由的容器组件。在 React Router v6 中，Routes 替代了之前的 Switch 组件。

示例:

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

const RoutesComponent = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
};

3. Route:
   • 定义 URL 路径与组件之间的映射关系。
   • path 属性指定 URL 路径，element 属性指定匹配时渲染的组件。

示例:

<Route path="/" element={<Home />} />

4. Link:
   • 用于在不同路由间导航，无需页面重新加载。它渲染一个 <a> 标签，响应点击事件并更新浏览器 URL。

示例:

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

const Navigation = () => {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
};

5. useNavigate:
   • 钩子函数，用于以编程方式导航到不同的路由。通常用于事件处理程序或副作用中。

示例:

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

const Login = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 登录逻辑
    navigate('/dashboard');
  };

  return <button onClick={handleLogin}>登录</button>;
};

基本路由示例

一个在函数式 React 应用中演示 React Router 基本用法的示例：

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

const Home = () => <h2>主页</h2>;
const About = () => <h2>关于页</h2>;
const Contact = () => <h2>联系页</h2>;

const App = () => {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li><Link to="/">主页</Link></li>
            <li><Link to="/about">关于页</Link></li>
            <li><Link to="/contact">联系页</Link></li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
};

export default App;

说明:

• BrowserRouter 组件包裹整个应用以启用路由。
• Link 组件创建不会触发页面重新加载的导航链接。
• Routes 组件包含所有路由，每个 Route 元素将 URL 路径映射到组件 (例如，Home、About 或 Contact)。
• 点击链接会更新 URL 并渲染相应的组件。

嵌套路由

React Router 也支持嵌套路由，允许在其他路由内定义路由。

// ... (省略部分代码，与上一个示例类似)

const Dashboard = () => (
  <div>
    <h2>仪表盘</h2>
    <nav>
      <Link to="profile">个人资料</Link>
      <Link to="settings">设置</Link>
    </nav>
    <Routes>
      <Route path="profile" element={<h3>个人资料页面</h3>} />
      <Route path="settings" element={<h3>设置页面</h3>} />
    </Routes>
  </div>
);

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard/*" element={<Dashboard />} />
      </Routes>
    </BrowserRouter>
  );
};

// ... (省略部分代码)

说明:

• /dashboard 路由有嵌套路由：/dashboard/profile 和 /dashboard/settings。
• 通过在父路由中使用 * 通配符 (path="/dashboard/*")，React Router 知道在 Dashboard 组件内部渲染子路由。

使用 useNavigate 重定向

可以使用 useNavigate 钩子以编程方式将用户重定向到不同的路由。

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

const RedirectComponent = () => {
  const navigate = useNavigate();
  // 将用户重定向到另一个路由
  navigate('/about');
  return null; // 返回 null 避免渲染任何内容
};

说明:

• RedirectComponent 组件渲染时会自动将用户重定向到 /about 路由。

路由参数

通过包含路由参数定义动态路由，这些参数可以在 URL 中传递值。

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

const UserProfile = () => {
  const { userId } = useParams();
  return <h2>用户资料：{userId}</h2>;
};

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:userId" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

说明:

• 路由路径中的 :userId 是一个路由参数。
• useParams 钩子在 UserProfile 组件内部使用，从 URL 中提取 userId 的值并在页面上显示。

总结

React Router 简化了 React 应用中视图间导航，提高了效率。BrowserRouter、Route、Link 等组件以及 useNavigate 等钩子，可以创建具有复杂路由逻辑的动态单页应用。掌握 React Router 基础知识，包括路由处理、嵌套路由和路由参数，可以轻松管理 React 应用的导航。