一、你每天都在用路由，只是你不知道而已

打开淘宝刷商品、在 B 站看视频、用 GitHub 浏览代码仓库——每一次点击链接、每一次页面跳转。背后都有一个路由程序在默默工作。

路由说白了就是“根据不同的地址，展示不同的内容”。在传统的 Web 开发中，这个活儿是后端干的：浏览器向服务器发送 HTTP 请求。服务器查库后返回完整的 HTML 页面这被称为服务端路由或多页应用。

这种模式最大的问题是每次跳转都会出现短暂的白屏——页面被销毁、重新请求、重新解析、重新渲染。网络不佳时使用者只能盯着空白页发呆，这在追求更好的体验的今天是致命缺陷。话说回来，

于是单页应用顺势出现：整个应用只加载一次 HTML。之后所有“页面切换”都由 JavaScript 在前端完成，不向服务器发请求，不刷新页面只是把页面上的内容换掉。这样切换“丝滑”，没有白屏，也没有等待。

实现“丝滑切换”的关键技术，就是前端路由。

二、前端路由的两种实现方式：Hash 模式 vs History 模式

主要问题：如何在不刷新页面的前提下改变浏览器地址栏的 URL，同时让页面内容跟着变？老实说，工程师们找到了两个突破口。

Hash 模式：利用 URL 的“锚点”

# 符号有个独特属性：改变 # 后面的内容。浏览器不会向服务器发送请求，也不会刷新页面。这本是用于页面内定位，但前端把它当作了路由入口。

访问 https://example.com/#/products/ 时浏览器只把 # 前面的部分发送给服务器，#/products/ 完全由前端处理。hash 变化会触发 hashchange 事件，前端监听后渲染对应页面。

Demo 中使用 Hash 模式：

import { HashRouter as Router } from 'react-router-dom';

所有 URL 都会带上 #。不过，优点是兼容性好，无需服务器设置；缺点是 URL 看起来不够美观。

History 模式：利用 HTML5 History API

history.pushState/.replaceState 让开发者可以在不刷新页面的情况下修改地址栏 URL。 且 URL 没有 #，看起来像普通后端路由（如 /about,/products/)。

Pitfall：直接访问或刷新时浏览器会把方法当作真实请求，如果服务器没有对应资源就会返回 404。必须在服务器上做 fallback，把所有未匹配方法指向 /index.html.

The two modes map to two React Router 组件：

// HashRouter
import { HashRouter } from 'react-router-dom';// BrowserRouter
import { BrowserRouter } from 'react-router-dom';

三、走进 React Router：主要三件套

npm install react-router-dom

Router / Routes / Route

• : 整个路由程序的大管家，监听 URL 变化并提供上下文。
• : 路由规则容器，从上到下匹配当前 URL 并决定渲染哪个组件。
• : 单条规则，“当 URL 为这个方法时渲染哪个组件”。

} />
} />
} />
} />

1. / : 首页入口。
2. /about: “关于”页面与方法直观对应。
3. /user/:id : 动态参数，可匹配任意使用者 ID。
4. * : 通配符，用于兜底 404 页面。

四、导航组件 Link：为什么不能用

The correct way:

import { Link } from 'react-router-dom';function Navigation {
return (

);}

The &-free navigation not only avoids page reload but also lets you use 's active styling via .

五、动态路由与 useParams：一个模板千种内容

// App.jsx 中
} />
// UserProfile.jsx
import { useParams } from 'react-router-dom';function UserProfile {
const { id } = useParams;return 

User Profile: {id}&l t;
}

• If you visit /user/12345 ,{ id: '12345' }.
• If you visit just "/user/"。you'll get an empty string – useful for fallback logic. <\/ul>

  ---

   const { productId } = useParams;// 从 "/products/:productId" 中提取
  从软件工程角度看，这相当于「参数化 UI」——同一个组件凭借不同参数渲染出无数视图。
  
  六、嵌套路由与 Outlet：页面的「俄罗斯套娃」​ }>
  {/* 二级 */}
  } />
  } />
  // Products.jsx 内部
  import { Outlet } from 'react-router-dom';const Products = => (
  <>
  
  产品列表＜/ h1>
  {/* 子路由渲染位置 */}
  ‹Outlet />
  );
  
  
  /products/new‹／ code> → 渲染 `NewProduct` 于 `Outlet` 位置 
  
  /products/42‹／ code> → 渲染 `ProductDetail` 于 `Outlet` 位置 
  <\/ul>
  
  **好处**的观点是，
  
  
  父级布局只写一次​；子页自动复用​，避免重复代码​。
  
  可无限层级嵌套——如 `/products/:productId/reviews/:reviewId` 等。​ 
  
  
  
  
  继续阅读
  
  
  
  Note: The response is intentionally truncated due to token limits.