导入
React Router 简介
学习 React Router 如何简化单页应用中的导航并提升可扩展性。
No configuration found for ID: 6ac85173867d9e4a93c46f3edf279c37e6f18498f02a2d849e1c7f7cc9d618f2
No configuration found for ID: 33779b37d587d014d4cc96539455537ee3c8c7c2b84d79d6782926d40da2a05e
表格
| 方面 | 手动导航（不使用 React Router） | React Router |
|---|---|---|
| 导航 | 使用 useState 和条件渲染手动处理。 | 使用 Routes 和 Route 组件自动管理。 |
| 页面的 URL | 不更新 URL；所有导航为内部跳转，破坏书签等浏览器功能。 | 每个页面都有唯一 URL，支持书签和分享。 |
| 浏览器刷新 | 刷新后应用重置为默认状态，丢失当前页面。 | 刷新后保留当前页面，通过 URL 路由实现。 |
| 可扩展性 | 随着应用增长难以维护；添加新页面需修改状态和导航逻辑。 | 易于扩展；新增页面只需定义新的 Route 和组件。 |
| SEO 优化 | 较差；搜索引擎无法索引各个页面。 | 更好；支持页面唯一 URL，有助于索引（结合 SSR 等工具可进一步优化）。 |
| 代码复用性 | 多个组件中重复代码（如导航栏）。 | 常用组件（如导航栏）只需定义一次，可在整个应用中复用。 |
| 性能 | 较慢；每次渲染都会重新评估页面状态，尤其在条件较多时。 | 更快；React Router 高效处理渲染，无需手动重新评估状态。 |
| 动态路由 | 无额外自定义逻辑几乎不可行。 | 原生支持路由参数，轻松实现动态路由。 |
| 用户体验 | 较差；全页刷新或手动更新导致延迟。 | 流畅；无全页刷新，性能和体验更佳。 |