React Router 是 React 应用中实现路由功能的核心库，能帮助你管理单页应用（SPA）的导航和页面切换。以下是快速上手指南：

1. 基本概念 📌

  • 路由匹配：通过 Route 组件匹配 URL 路径到对应的组件
  • 嵌套路由：使用 Outlet 实现父子路由嵌套结构
  • 动态路由：通过 params 参数传递可变数据（如 /user/:id）
  • 编程式导航：使用 useNavigate 实现跳转逻辑

2. 安装与配置 🔧

npm install react-router-dom
  • 创建路由文件 App.js 示例：
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/about', element: <About /> }
]);

export default function Main() {
  return <RouterProvider router={router} />;
}

3. 常见用法 📈

  • 📌 声明式路由：使用 <Route> 定义路径和组件
  • 📌 路由参数：通过 useParams 获取动态参数
  • 📌 路由重定向：使用 useNavigate 实现跳转
  • 📌 路由懒加载：配合 lazy 和 Suspense 优化性能

4. 注意事项 ⚠️

  • 避免嵌套过多层级，保持路由结构简洁
  • 使用 createBrowserRouter 替代旧版 BrowserRouter 更符合 React 18 规范
  • 路由守卫需通过 loader 和 action 实现
react_router_v6

想要深入了解 React Router 的高级用法？可以参考我们的官方指南。