React Router 教程 📚

React Router 是 React 应用中实现动态路由跳转的核心库，常用于单页应用（SPA）的导航管理。以下是快速上手指南：

📌 安装与基础配置

npm install react-router-dom

• 首页需引入 BrowserRouter 包裹整个应用
• 路由定义示例：

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

• 使用 useNavigate 实现编程式导航 💡

🚀 路由嵌套实战

<Route path="users">
  <Route index element={<UsersList />} />
  <Route path=":userId" element={<UserProfile />} />
</Route>

• 嵌套路由可构建层级化页面结构 🌐
• 使用 Outlet 渲染子路由内容 📁

🔍 动态路由参数

<Route path="posts/:postId" element={<PostDetail />} />

• 参数通过 useParams 获取 📊
• 支持多层级参数匹配 🧩

🔒 路由保护机制

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

• 自定义 ProtectedRoute 组件实现权限控制 🔐
• 结合 useNavigate 实现重定向 🔄

📝 常见问题

• 路由刷新丢失参数？使用 useSearchParams 📌
• 路由嵌套层级过深？考虑路由懒加载 📦
• 路由性能优化？使用 React.memo 和 useMemo 🧠

🌐 扩展阅读

深入理解 React Router v6 的新特性