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

一、路由匹配规则

1、基本匹配规则

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

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

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


  
    } />
    } />
  

1
2
3
4
5
6
7
8

2、动态参数匹配规则

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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3、嵌套路由匹配规则

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

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

function App() {
  return (
    
      
        } />
        {/*
          父级路由 /dashboard 对应的是 Dashboard 组件，
          而子路由 /dashboard/:id 对应的是 DashboardDetail 组件。
          子路由的 path 是完整的路径，包含了父级路由的 path。
          因此，当访问 /dashboard/123 路径时，React Router 会先匹配父级路由 /dashboard，
          然后再匹配子路由 /dashboard/:id，最终渲染 DashboardDetail 组件
        */}
        }>
          } />
        
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3、匹配所有路径

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

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

function App() {
  return (
    
      
        {/*
          我们使用了通配符 * 来匹配所有以 /about/ 开头的路径，
          例如 /about, /about/team, /about/contact 等等。
          当用户访问这些路径时，都会渲染 AboutInfo 组件
        */}
        } />
        } />
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

二、代码分割

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'));
1

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 (
    
      Loading...