React Router 指南 🚀

React Router 是 React 应用的核心导航工具，用于管理单页应用（SPA）中的路由跳转与组件渲染。以下是关键知识点：

基础概念

• 路由匹配：通过 <Route> 组件定义路径与组件的映射关系
• 嵌套路由：支持子路由结构，适合多层级页面布局
• 动态路由：使用 :param 参数匹配可变路径，如 /user/:id
• 编程式导航：通过 useNavigate 或 history 对象实现跳转

安装与配置

npm install react-router-dom

配置时需注意：React Router v6 需使用 <BrowserRouter> 作为根路由容器

常见用法

1. 定义路由

   <Route path="/home" element={<Home />} />
   

2. 嵌套路由示例

   <Route path="/dashboard" element={<Dashboard />}>
     <Route path="profile" element={<Profile />} />
   </Route>
   

3. 带参数的路由

   <Route path="/user/:id" element={<UserDetail />} />
   

扩展阅读

• React Router 官方文档 📚
• 快速入门教程 🚀
• 高级路由技巧 🔧

通过合理使用 React Router，可以显著提升 SPA 的用户体验与代码可维护性。建议结合 路由守卫 功能实现权限控制。