React Router 是怎么实现灵活导航的？

🎙 欢迎来到《前端达人 · React播客书单》第 21 期。

今天我们不讲 Hook，来拆解前端开发中另一个高频组件：React Router 的进阶导航模式。

你可能用过 <Link> 或 <Route>，但当项目变得复杂，你会发现：

• 页面有父子嵌套、需要共享布局
• URL 中需要动态展示详情页
• 默认子页面要优雅地控制

本期就带你搞懂三大核心功能： 👉 路由参数 useParams👉 嵌套路由 children + Outlet👉 默认子路由 index: true

🔍 什么是路由参数（Route Params）？

👇 举个例子：

/products/123  
/users/bob

其中的 /123 或 /bob 就是URL 参数，用于展示不同的内容页。

在配置中我们这样写：

{
  path: '/products/:id',
  element: <ProductPage />
}

/:id 就是参数定义，**:id 就是变量名**。

🧠 怎么在组件中读取参数？

用 React Router 提供的 Hook：

import { useParams } from 'react-router-dom';

type Params = { id: string };

function ProductPage() {
  const { id } = useParams<Params>();
  const productId = parseInt(id); // 类型转换（因为是 string）

  // 根据 id 拉数据、渲染组件
}

📌 注意：所有 URL 参数默认都是字符串类型。

🧱 嵌套路由：分层页面的最佳实践

很多中大型页面都有父子结构：

• /settings → 设置页容器
• /settings/profile → 用户资料
• /settings/security → 安全设置页

在配置中可以这样做：

{
  path: '/settings',
  element: <SettingsLayout />,
  children: [
    { path: 'profile', element: <ProfilePage /> },
    { path: 'security', element: <SecurityPage /> }
  ]
}

在 SettingsLayout 组件中加入一个 <Outlet />，用来“占位”子页面内容。

function SettingsLayout() {
  return (
    <>
      <Sidebar />
      <Outlet />
    </>
  );
}

💡 所以嵌套路由 = “父路由渲染公共布局 + 子路由通过 Outlet 渲染实际内容”。

⭐ Index 路由：默认子页面的优雅入口

再看 /settings 这个页面，当用户访问 /settings 而不带任何子路径时，我们希望默认展示“设置概览页”。

React Router 提供了 index: true 这种方式：

{
  index: true,
  element: <SettingsOverview />
}

📌 写在 children 中，不需要 path，表示“当匹配父路径但没有其他子路由时”的默认页面。

📌 知识点总结

🧪 推荐实战练习

建议你在项目中试试这个练习：

• 创建一个 /users 列表页
• 为每个用户设置动态链接 /users/:id
• 创建嵌套路由布局 UserLayout
• 设置 index: true 作为默认用户信息页

你会实际体验到这三种导航模式是如何协作的。

📦 下一期我们来讲「React Router 的懒加载与错误边界」：让你的路由更丝滑、更健壮，别错过！

#React #React播客 #前端播客 #前端达人 #TypeScript