第42节——路由知识额外扩展

一、路由匹配规则

1、基本匹配规则

/path：精确匹配路径为 /path 的路由。

/path/subpath：精确匹配路径为 /path/subpath 的路由

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

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

2、动态参数匹配规则

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

<Router>
  <Routes>
    
    {/* 
          匹配路径为 /users/123、/users/abc 等任意值的路由，
          并将匹配到的值存储在 id 参数中
        */}
        <Route path="/users/:id" element={<UserProfile />} />
        {/* 
          匹配路径为 /users 或 /users/123 等任意值的路由，并将匹配到的值存储在 id 参数中，
          如果路径中不包含 id 参数，则 id 参数的值为 undefined
        */}
        <Route path="/users/:id?" element={<UserList />} />
        {/* 
          匹配路径为 /users/123、/users/456 等数字的路由，
          并将匹配到的值存储在 id 参数中，其中 \d+ 表示正则表达式，
          用于匹配一个或多个数字
        */}
  </Routes>
</Router>

3、嵌套路由匹配规则

React Router 6 中的嵌套路由需要子路由的 path 包含父级路由的 path

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

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        {/*
          父级路由 /dashboard 对应的是 Dashboard 组件，
          而子路由 /dashboard/:id 对应的是 DashboardDetail 组件。
          子路由的 path 是完整的路径，包含了父级路由的 path。
          因此，当访问 /dashboard/123 路径时，React Router 会先匹配父级路由 /dashboard，
          然后再匹配子路由 /dashboard/:id，最终渲染 DashboardDetail 组件
        */}
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="/dashboard/:id" element={<DashboardDetail />} />
        </Route>
      </Routes>
    </Router>
  );
}

3、匹配所有路径

在 React Router 6 中，可以使用*来匹配所有路径

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

function App() {
  return (
    <Router>
      <Routes>
        {/*
          我们使用了通配符 * 来匹配所有以 /about/ 开头的路径，
          例如 /about, /about/team, /about/contact 等等。
          当用户访问这些路径时，都会渲染 AboutInfo 组件
        */}
        <Route path="/about/*" element={<about />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

二、代码分割

1、代码分割用来解决什么问题

React Router 在使用时，会把所有路由相关的组件都打包进同一个 JavaScript 文件中，这会导致整个应用的体积变得很大，加载时间变长。为了解决这个问题，我们可以使用代码分割（code splitting）技术，将不同的路由组件分别打包成不同的 JavaScript 文件，实现按需加载。

2、React.lazy

React.lazy 是 React 16.6.0 新引入的一个函数，它可以让你很容易地实现代码分割（code splitting），实现组件的按需加载。React.lazy() 函数接受一个函数作为参数，这个函数必须返回一个动态 import() 语句。

const MyComponent = React.lazy(() => import('./MyComponent'));

3、例子

React Router 提供了 React.lazy() 和 React.Suspense 来实现组件的懒加载。React.lazy() 是一个高阶函数，可以将一个动态 import() 语句包装成一个能够被渲染的组件，而 React.Suspense 则是一个组件，可以在组件加载时显示一个 loading 界面，等待组件加载完成后再显示实际内容。

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

// 使用 React.lazy() 和 import() 来分别定义了三个路由组件 
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));
/**
使用 React.Suspense 包裹了整个 Routes 组件，
当路由组件还未加载完成时，会显示一个 "Loading..." 的提示信息
*/
function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

三、路由 (V5) 和路由 (V6) 差异解读

react Router v6使用Hooks来实现路由，而v5使用高阶组件（HOCs）来实现路由。这是它们之间最大的区别。

1、路由配置

React Router v5中的路由配置需要将Route组件作为子组件嵌套在Switch组件中。而React Router v6中的路由配置方式发生了变化。现在，我们需要在Routes组件中使用数组来配置路由。

2、嵌套路由

在React Router v6中，嵌套路由的使用方式更加简单直观。在v5中，嵌套路由需要在组件之间进行深度传递props，而在v6中，可以使用嵌套路由。

3、状态管理

React Router v6通过提供useSearchParams、useLocation和useNavigate等Hooks，使得状态管理变得更加方便。这些Hooks可以帮助我们在不同的路由之间共享状态，而在v5中需要使用类似于redux等外部状态管理库来实现。

四、如何在类组件中使用

编写一个高阶组件

import React from "react";
import { useNavigate } from "react-router-dom";

export default function WithRouter(WarpComponent) {
  const navigate = useNavigate();
  return <WarpComponent {...this.props} navigate={navigate}></WarpComponent>;
}