React Router 基础：宣传册网站的多页导航
I’m happy to translate the article for you, but I need the text you’d like translated. Could you please paste the content you want converted to Simplified Chinese? (The source line you provided will stay unchanged.)
引子 — 为什么这很重要
如果你正在使用 React 构建一个简洁的宣传网站，你会希望拥有清晰、基于 URL 的导航，同时不牺牲单页应用的速度和状态保持。React Router 为你提供类似多页的导航体验，且无需完整页面刷新，让访客能够快速且可预测地在首页、关于我们、服务和联系页面之间切换。
本文阐述了实际的原因和做法：何时使用 React Router、最小化配置的样子，以及一些实现技巧，帮助你保持站点的可维护性和可部署性。
何时在宣传网站中使用 React Router
宣传网站通常是少量静态页面的集合，旨在向访客提供信息。即使是 3–6 页的网站，React Router 也很有用，因为它：
- 保持导航流畅（无需完整刷新）。
- 将可读的 URL 映射到组件。
- 使布局和导航可复用。
- 为未来的扩展（嵌套页面、章节）留出空间。
如果你倾向于组件优先的架构，并计划以后添加一些小的交互功能，Router 是一种面向未来的选择。
最小化设置（概念上）
- 在项目中安装
react-router-dom。 - 使用
BrowserRouter包裹你的应用，以便路由功能可用。 - 定义一个
Routes容器以及多个Route条目，将路径字符串映射到组件。 - 在内部导航时使用
Link或NavLink元素，而不是原生的锚点标签。
可以把 BrowserRouter 看作线路，Routes/Route 看作地图，而 NavLink/Link 则是可点击的 GPS，能够在不离开页面的情况下更新 URL。
核心概念（通俗语言）
- BrowserRouter – 路由提供者，监听浏览器 URL 并管理历史记录。
- Routes – 一个容器，根据当前路径选择渲染哪个路由。
- Route – 单个路径 → 组件的映射，例如
"/about"→AboutPage。 - Link / NavLink – 替代锚点标签的组件，可在不刷新页面的情况下导航；
NavLink能自动标记当前激活的链接。 - Outlet – 父布局中的占位符，用于渲染嵌套的子路由。
你不需要记住 API 名称，但要理解它们的作用：提供者、路由映射、链接辅助工具，以及用于嵌套内容的 outlet。
编码前快速检查清单
- 已安装 Node 和 npm；已创建项目（Create React App、Vite 等）。
- 已在依赖中添加
react-router-dom。 - 在应用根部使用一个
BrowserRouter。 - 使用
Routes和Route声明页面。 - 使用
NavLink构建导航，以实现激活样式。 - 使用回退
Route（path="*"）处理 404。
实用实现技巧（开发者友好）
- 将页面保持为简单组件：
Home、About、Services、Contact。为清晰起见，将它们放在src/pages目录下。 - 使用 Layout 组件来包含导航栏（Navbar）和页脚（Footer），并通过
Outlet渲染子路由。这样可以避免重复编写头部/页脚代码。 - 使用
NavLink的className或style作为函数来应用激活状态，而不是手动比较路径。 - 对于某个章节下的深层链接（例如
/services/web-design），使用嵌套路由，使父布局保持一致，子内容在原位渲染。 - 避免在内部链接中使用原生
<a>标签；它们会导致完整页面刷新，破坏 SPA 体验。 - 添加一个简单的 404 路由作为最后的
Route：当没有路径匹配时，渲染一个友好的“页面未找到”提示。
部署要点
客户端路由在静态托管时需要额外一步：将主机配置为对任何路径都提供 index.html，以防深链接出现 404。
- Netlify – 添加重定向规则，将所有路径指向
index.html。 - Vercel – 通常会自动处理 SPA 重写，但如果你自定义了路由，请确认。
此外，如果 SEO 重要，请设置合适的 meta 标签（如 React Helmet 或类似工具），并考虑以后使用服务器端渲染，以提升 SEO，尤其是当你的宣传站点需要搜索可见性时。
最佳实践概述
- 从小开始，并集中管理路由定义。
- 在导航中使用语义化 HTML，并测试键盘可访问性。
- 保持路由路径为小写且具有描述性。
- 通过嵌套路由和布局组件为扩展做好规划。
Conclusion
React Router 将一个简单的 React 应用转变为结构良好的宣传网站，拥有可读的 URL、一致的布局和快速的导航。使用 layout + outlet 模式，使用 NavLink 实现激活样式，并记得在部署时为客户端路由配置主机。掌握这些基础后，您的宣传站点将快速、易于维护，并具备扩展能力。