目录

一、HashRouter：给 React 装上路由引擎

前端单页应用需要把 URL 与组件映射起来。react-router-dom 把这一套机制封装成了 HashRouterRoutes 和 Route 三个主要组件。不过，

import{ HashRouter。Routes,Route } from'react-router-dom';import{ Navigation } from'./Navigation';import{ Home } from'./pages/Home';import{ About } from'./pages/About';说起来，import{ NotFound } from'./pages/NotFound';


} />
} />
} />

;

• HashRouter : 监听 hashchange 并提供路由上下文。
• Routes : 匹配当前 hash，只渲染第一个匹配的子 Route。
• * 方法 : 通配符，所有未匹配到时兜底显示 NotFound。
• **为什么不用``** 而用 **``**？传统 `

与 的区别示例：

// ❌ 传统 a 标签：点击后触发 HTTP 请求。整页刷新
// ✅ React Router 的 Link：只改 hash，不发 HTTP 请求
About
使用 `` 可以避免不必要的网络请求和页面重绘，提高使用者体验。

在大型项目中，可能有几十个页面组件。如果全部写在顶层 `import`。Webpack 会把它们打包进同一个 JS 文件——首页加载时就要下载所有代码，即使你只访问首页。这样会导致首屏渲染变慢，使用者体验差。

至于**痛点**，一次性下载所有模块 → 大包体 → 首屏卡顿。方法是按需加载，下面展示如何使用 `React.lazy` 和 `Suspense` 实现代码拆分。怎么说呢，

// 静态 import
import Home from './pages/Home';import About from './pages/About';// 动态 import
const Home = lazy => import);const About = lazy => import);Loading...}
{

} />
} />
// ...

}

- `lazy` 接收返回 `` 的函数，仅在第一次渲染时调用。- `Suspense` 的 `fallback` 在异步组件加载期间展示占位 UI。不过，**收益**
- 单页总大小从 N×20KB 降到约 20KB。- 首屏速度提高数倍，- 后续访问其他页面时才下载对应模块。



从**痛点**来看。多个子方法共用同一布局，却又需要单独渲染内容区。手动切换父组件会导致重复代码和状态同步问题。

React Router 用嵌套 Route + Outlet 解决这个需求：

}>
{/* 子路由 */}
}} />
}} />
}} />
javascript
const Products = => (
<>
 // 父布局
<

{'Products' Layout'}
>
<


);


* 父布局一次性定义即可共享给所有子路由。*

* 子路由根据 URL 匹配后直接插入到 `` 中，无需手动切换视图或复制状态。*

* 若忘记 `` 则子页面永远不会渲染——这是最常见错误之一！*




主要价值说明这方面，

"少写代码" 是表象。真正价值在于"共享父组件布局和状态",所以即使你新增一个产品详情页，也不需要再手工添加标题或筛选逻辑，只需添加一个子 Route 即可。老实说，



 useParams ：从 URL 中提取参数 

**痛点**：想。
// 引入 Hook
import { useParams } from 'react-router-dom';const UserProfile = =>
{
let {id} = useParams;// 提取 /user/:id 中的 id
 return (
<

User Profile :{id} >
);不过，

}
// 方法配置
}} />;


* `/user/abc`,`/user/123`,都能匹配这条规则，并把 abc 或者 123 放进 params 对象里*

* 用法一样适用于产品详情等场景，例如 `/products/:productId` *


* 如需多参数可继续使用 “:” 标记。例如 `/orders/:orderId/items/:itemId`. *
\t\t\t
\t\t\t
\
\t \t \t \t \t \t \t \t
\ t\\\ n\r\\\r\\r\r\r\r\r\r\r\r\r rrrrrrrrrrrr"
\end{lstlisting}
\vspace{5pt}
\textbf{Tip}: 将业务逻辑放进 Hook，让业务更清晰，也方便单元测试。### useNavigate ：代码中控制跳转

从**痛点**来看。在某些场景下你想“程序化”地导航，而不是靠链接点击，例如错误页自动回首页或提交表单后跳转成功页。不再依赖浏览器默认行为，可保证更细粒度的控制和更好的使用者体验。
jsx
// 引入 Hook
import { useNavigate } from 'react-router-dom';function NotFound {
const navigate = useNavigate;useEffect =>{
setTimeout=>{navigate},3000);// 三秒后自动回首页
},);return，}


* 返回值是一个可直接调用的函数，用来执行“push”或“replace”操作 *
\t\t
• “push” – 新增历史记录项，使用者可以后退至原地址 *
• “replace” – 替换当前历史记录项，让返回键失效 *

Navigate Component ：声明式重定向

jsx
#to属性设置目标地址，#replace属性表示替换当前历史记录条目，而不是新增一条~
}
/>

// 原方法 /old-path 自动重定向到 /new-path，且不会留下旧方法痕迹





#
主要概念
常见痛点
推荐做法




1️⃣
HashRouter+Routes+Route
包大导致首屏慢
用懒加载拆分。每次只下载所需模块


2️⃣
Link vs a标签
页面完整刷新影响 UX
使用 Link 避免网络请求与重绘


3️⃣
lazy + Suspense
初始包体大卡顿
动态导入 + fallback 占位


4️⃣
嵌套路由+Outlet
多子方法共用布局难维护
定义父 layout，一次写完，再往下挂载子 Route


5️⃣
动态路由+编程式跳转+声明式重定向
参数获取麻烦/无状态导航/旧地址残留问题
用 Hook 提取 params，用 navigate 控制流程，用 Navigate 做永久重定向





🎯 小结
从手写 HashRouter 到完整利用 react‑router‑dom，全家桶帮你快速落地前端路由，实现：


零刷新的 SPA 导航

按需加载减少首屏体积

统一布局与状态共享

灵活处理动态参数与导航流程


把这些技巧融入项目，你就能摆脱“太大太慢”“层级混乱”的困扰，让使用者体验直线上升。

💡 记住一句话: “URL 是一维线，你的 React Router 就是这条线上最快捷通行证。”