React Router 是 React 生态中用于构建单页应用（SPA）的主流路由库，能帮助开发者管理应用的导航和动态加载组件。以下是核心知识点整理：

🧩 基本用法

  1. 安装 

    npm install react-router-dom

  2. 常用组件

    • <BrowserRouter>：基于 HTML5 的 history API 实现
    • <Route>：定义路由路径与组件的映射关系
    • <Switch>：按顺序匹配第一个符合条件的路由
    • <Link>：创建导航链接（替代 <a> 标签）
    • <Redirect>：实现页面跳转逻辑

  3. 路由配置示例 

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

📌 常见功能

  • 动态路由
    通过 :param 匹配可变路径： 
    <Route path="/user/:id" component={User} />
  • 嵌套路由
    使用 <Route> 的 children 属性实现层级结构
  • 路由守卫
    利用 component 或 render 属性控制访问权限
  • 编程式导航
    通过 useNavigate 钩子实现跳转： 
    navigate('/dashboard', { replace: true });

📚 扩展阅读

React_Router

📌 提示：使用 <Outlet> 可实现嵌套布局，结合 useParams 可获取动态路由参数。更多实践可参考 React Router 嵌套路由指南。