前言

上一篇《从多页到 SPA：手写一个 Hash 路由》我们手写了 Hash 路由，理解了前端路由的本质。但实际项目中，我们不会每次都从零造轮子——React Router 就是 React 环境中最主流的前端路由方案。

这篇文章基于 React Router v7通过一个完整的 Demo 项目。覆盖从基础配置、动态路由、嵌套路由、懒加载，到鉴权守卫、兜底等所有实际项目中的高频场景。

一、项目起步

技术栈

入口文件

// src/main.jsx
import { StrictMode } from 'react';import { createRoot } from 'react-dom/client';话说回来，import App from './App.jsx';createRoot).render(



);

入口一如既往地简洁——因为路由逻辑全部封装在 中。

二、HashRouter vs BrowserRouter：两种路由模式

在正式开始之前，必须先搞清楚一个关键的选型：

// HashRouter
http的观点是，//localhost:3000/#/pay
// BrowserRouter
至于http，//localhost:3000/pay

这篇文章 Demo 使用 BrowserRouter这是现代 SPA 的主流选择。

三、基础路由配置：Routes + Route

初学者往往把 Router 放在错误的位置，导致页面刷新或导航失效。下面给出最简洁且易维护的写法：

// src/App.jsx
import { BrowserRouter as Router。
Routes,Route } from 'react-router-dom';const App = => {
return (




} />
} />
} />



);}，export default App;

关键点说明的观点是。

• : 最外层包裹，整个应用的路由容器。它决定了后续是否使用 History API 或 hash 模式。
• : 方法匹配区域，只能有一条被渲染；保证同一时间只展示一个页面组件。
• : 单条路由规则。path 匹配 URL，element 指定渲染的组件。
• path="\*": 通配符，用于兜底未命中方法。
• .

四、Link 组件：SPA 的导航方式

使用普通