React 路由是构建单页应用（SPA）的核心工具，它通过动态加载组件实现页面间的无缝跳转。以下是关键知识点：

基础概念 🌐

  • 路由匹配：通过 path 和 component 绑定 URL 到 UI
  • 嵌套路由：使用 <Route> 包裹子路由实现层级结构
  • 动态路由：通过 :param 占位符匹配可变路径
  • 编程导航：使用 useNavigate 实现客户端跳转

安装与配置 🛠

npm install react-router-dom

示例项目：React基础教程 提供完整配置模板

常用API 📚

方法 用途
useParams 获取动态路由参数
useRouteMatch 检查当前路径匹配情况
createBrowserRouter 配置路由表
Outlet 渲染嵌套子路由

路由嵌套 🧱

<Route path="/" element={<Layout />}>
  <Route index element={<Home />} />
  <Route path="about" element={<About />}>
    <Route path="team" element={<Team />} />
  </Route>
</Route>

动态路由 🔄

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

示例：Routing_Overview 展示动态路由实战案例

常见问题 ❓

  • 路由不生效？检查 BrowserRouter 是否包裹根组件
  • 404页面？需在路由表最后添加通配符路由
  • 嵌套路由空白？确保子路由 element 正确嵌套
React_Router
Routing_Overview