🎙 歡迎來到《前端達人 ·?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，表示“當匹配父路徑但沒有其他子路由時”的默認頁面。
📌 知識點總結
模塊 | 核心用途說明 |
|---|---|
useParams() | 從 URL 中提取參數（字符串類型） |
嵌套路由 | 用? |
Index 路由 | 默認子路由，提升首次訪問體驗 |
🧪 推薦實戰練習
建議你在項目中試試這個練習：
創建一個?
/users?列表頁為每個用戶設置動態鏈接?
/users/:id創建嵌套路由布局?
UserLayout設置?
index: true?作為默認用戶信息頁
你會實際體驗到這三種導航模式是如何協作的。
📦 下一期我們來講「React Router 的懶加載與錯誤邊界」：讓你的路由更絲滑、更健壯，別錯過！
#React? ? ? ??#React播客? ? ? ??#前端播客? ? ? ??#前端達人? ? ? ??#TypeScript? ? ?
)