React Router 是 React 生态中用于处理前端路由的核心库，帮助开发者实现单页应用（SPA）的多页面导航体验。以下是关键知识点速览：

📦 安装与基础

npm install react-router-dom
  • 安装后需引入 BrowserRouter 或 HashRouter 作为根路由容器
  • 使用 Route 组件定义路径映射关系
  • Switch 组件用于匹配第一个符合条件的路由

🗺️ 路由配置示例

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

🧭 嵌套路由结构

<Route path="/user">
  <Route path="/user/:id" element={<UserProfile />} />
</Route>
路由结构

🧩 动态路由与参数

  • 使用 :param 定义动态段（如 /posts/:postId）
  • 通过 useParams 获取参数值
  • 参数可结合 useNavigate 实现跳转逻辑

🔄 导航组件

  • Link 组件用于创建导航锚点
  • useNavigate 提供编程式导航能力
  • useLocation 可获取当前路由信息

📚 扩展阅读

动态路由

📌 提示：合理使用路由守卫和加载状态可提升应用健壮性。如需深入学习，建议结合官方文档与实际项目实践。