React Router 入门指南 🚀

React Router 是 React 生态中用于管理 单页应用 (SPA) 路由的主流库，能帮助开发者实现页面跳转、嵌套路由、动态路由等功能。以下是核心知识点与使用技巧：

🧩 核心概念

1. 路由配置
   通过 Route 和 Switch 定义路径映射，如：

   <Route path="/home" component={Home} />
   <Route path="/about" component={About} />
   

   📌 了解更多：React Router 基础

2. 嵌套路由
   使用 Route 的 children 属性实现子路由结构，适合模块化开发：

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

3. 动态路由
   通过 :param 匹配动态路径段，结合 useParams 获取参数：

   <Route path="/post/:id" component={Post} />
   

4. 路由组件
   使用 Outlet 实现嵌套布局，useNavigate 控制导航跳转。

📚 实用技巧

• 编程式导航
  用 useNavigate 替代 <Link>，适合条件跳转：

  const navigate = useNavigate();
  navigate('/contact', { replace: true });
  

• 路由守卫
  通过 useEffect 实现权限校验，或使用 Navigate 组件重定向：

  useEffect(() => {
    if (!user) navigate('/login');
  }, []);
  

• 404 页面
  在 Switch 外层包裹 Route 捕获未匹配路径：

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

📷 图片展示

🌐 扩展学习

• React Router 官方文档（英文）
• React Router 与状态管理结合 的高级用法
• Vue Router 对比（如需对比其他框架）

⚠️ 注意事项

• 确保 react-router-dom 版本与 React 兼容（v6 推荐）
• 使用 createBrowserRouter 代替旧版 BrowserRouter 以获得更好的性能
• 避免在路由中嵌套过多层级，建议保持结构扁平化

如需进一步了解 React Router 的高级功能或最佳实践，可访问 React Router 高级指南。