React Router 指南 🚀

React Router 是 React 生态中用于处理客户端路由的主流库，能帮助开发者构建单页应用（SPA）的导航系统。以下是核心概念与使用方法：

---

1. 安装与基本配置

npm install react-router-dom

⚠️ 注意：确保使用 BrowserRouter 作为根路由组件，例如：

import { BrowserRouter as Router } from 'react-router-dom';
function App() { return <Router>...</Router> };

---

2. 路由定义方式

• 声明式路由
  使用 <Route> 组件匹配路径：

  <Route path="/about" element={<About />} />
  

  📌 适用于静态页面跳转

• 编程式路由
  通过 useNavigate 实现动态导航：

  const navigate = useNavigate();
  navigate('/contact');
  

---

3. 常用功能示例

功能	用法	示例
嵌套路由	children 属性实现层级结构	查看嵌套路由示例 🗂️
动态路由	:param 捕获路径参数	学习动态路由 🔁
路由守卫	useEffect + window.location 实现权限控制	路由守卫实践 🔒

---

4. 路由匹配规则

• 精确匹配：path="/home"
• 模糊匹配：path="/:id/*"
• 重定向：<Redirect to="/default" />（React 6.4+ 已弃用，改用 useNavigate）

---

5. 常见问题

• ❓ 如何避免路由重复？
  使用 exact 属性或 react-router-dom v6 的 path 匹配机制

• ❓ 如何处理 404 页面？
  添加通配符路由：

  <Route path="*" element={<NotFound />} />
  

---

📌 图片说明：React Router 的典型路由结构图，展示组件嵌套与路径映射关系

---

推荐学习路径

1. 先掌握 React 基础概念 📘
2. 再深入 React Router 高级用法 🧠
3. 实践 路由与状态管理 🔁

---

本指南内容基于 React Router v6，如需了解 v5 版本差异，请参考 版本迁移文档 📄