不讲 API 列表，而是带你从零搭一个完整的 React 单页应用路由程序。读完你会知道每个 API 为什么存在、什么时候用、还有容易踩的坑。话说回来，

目录

• 你打开的真的是"新页面"吗？
• 一、前端路由为什么存在
• 二、 第一个路由：Routes、Route、Link
• 三、 路由懒加载：首页快三秒的秘密
• 四、 嵌套路由：页面套页面的结构之美
• 五、 动态路由参数：同一个组件渲染不同数据
• 六、 编程式导航：不用 Link 也能跳转
• 七、兜底：优雅的"页面不存在"
• 八、布局决策：父路由放什么、子路由放什么
• 一张图回顾全部知识点

你打开的真的是"新页面"吗？

你在浏览器地址栏看到 /home/products//about看起来和传统网站一模一样。但你注意到没有——页面切换时没有白屏，没有 loading 转圈。甚至 DevTools 的 Network 面板里也没有新的 HTML 请求。

这不是魔法，这是前端路由。

、为什么需要、怎么写。

一、前端路由为什么存在

先回到本质：什么是路由？

传统做法：

sequenceDiagram
participant U as 使用者
participant B as 浏览器
participant S as 服务器
U->B的观点是。点击 /about 链接
从B->S来看，GET /about.html
说到S-->B，OK 整个 HTML 文档
再看B->B，清空页面重新渲染整个 DOM
Note over B: 白屏闪烁

每一次导航都是一次 HTTP 往返 + 整页重建。

前端路由思路：

graph LR
A --> B{如何处理}
B -->|传统| C
C --> D
B -->|前端路由| E
E --> F
F --> G

主要理念：URL 要变，但不能每次都找服务器要新 HTML——JavaScript 自己在客户端就把 DOM 换了。

Pain Point：使用者在慢网速下点击链接会出现“白屏+卡顿”，导致留存率骤降。老实说，

实现方式有两种：

• Hash 路由：`#` 后面的部分不会触发 HTTP 请求。
• History 路由：`/page1` 干净 URL，需要服务器做好 fallback 配置。其实，

This demo 使用的是

二、第一个路由：Routes、Route、Link

最基础的配置示例：

// App.jsx — 路由配置。所有路由的“总开关”
import { HashRouter,Routes,Route } from 'react-router-dom';
{/* 路由器：决定用 Hash 还是 History 模式 */}

{/* 方法集合，只渲染第一个匹配到的 Route */}
} />
} />
} />

至于导航链接，为什么不用

// ❌ 用 a 标签会导致整页刷新，SPA 状态全丢
// ✅ 用 Link 拦截点击，仅做局部替换
import { Link } from 'react-router-dom';按理说，Home
About

本质上仍然渲染为

Pain Point： 很多新人直接写 `

三、路由懒加载：首页快三秒的秘密

If you have many pages。loading m all at once wastes bandwidth and hurts first‑paint time.

// App.jsx – 懒加载示例
import { lazy,Suspense } from 'react';const Home = lazy => import);const About = lazy => import);const UserProfile = lazy => import);Loading...};>

} />
} />
{/* …其他 Route ，*/}

• `lazy` 告诉打包工具把组件拆成独立 chunk，只在需要时下载。
• `Suspense` 的 `fallback` 是加载期间展示的占位 UI。按理说，
• Pain Point：如果不使用懒加载。首页往往需要下载所有模块导致首屏> 5 s；使用者流失率随之上升，
• Pain Point 示例图已省略，但实际效果可通过 Chrome DevTools → Network 看到仅请求当前 Chunk。

四、嵌套路由：页面套页面的结构之美

A typical module has公共布局 + 多个子视图。例如产品模块的观点是，

// App.jsx – 嵌套路由写法
}>
} />
} />

The child paths are **relative** . React Router automatically concatenates m.

// pages/products/index.jsx – 父布局 + Outlet 占位符
import { Outlet } from 'react-router-dom';const Products = => (
<>
{/* 父级公共 UI 如侧边栏或面包屑 */}
←&rarr，←&rarr，←&rarr，←&rarr，
{/* 子视图渲染位置 */}
Outlet />;)，export default Products;不过，

Clever tip: If you need a nested layout。just add anor `` inside ``. The principle stays same..

五、动态路由参数：同一个组件渲染不同数据

 // pages/UserProfile/index.jsx
import { useParams } from 'react-router-dom'
const UserProfile = => {
const { id } = useParams;其实，// 🔑 从 URL 中解出 :id
return 使用者 ID:{id};}，export default UserProfile;


:id 表示 **动态段**。React Router 会把实际值放进 . 

Pain Point – 忘记在 useEffect 里加入依赖，会导致旧数据残留或无限循环请求。说起来，
jsx
const { productId } = useParams;
useEffect=>{
fetch.n;},)，// ⚠️ 必须依赖 productId

六 、 编程式导航 ：不用 Link 也能跳转 

jsx
// pages/NotFound/index.jsx — 秒后自动跳回首页
import { useNavigate } from 'react-router-dom';说起来，const NotFound = => {
const navigate = useNavigate;useEffect=>{
const timer = setTimeout=>navigate,3000);return=>clearTimeout;},)，return;}，


；其实，适用于显式 UI 导航，如菜单栏。

navigate}>；适用于业务逻辑驱动跳转，如登录失效后强制跳转。

；只用于离站外部链接，否则会造成整页刷新。