一、路由匹配规则
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>;
}