一、useParams 的基本用法

用途：用于在組件中獲取當前 URL 的動態路由參數（如 /user/:id 中的 id）。

import { Routes, Route, useParams } from 'react-router-dom';// 定義路由
function App() {return (<Routes><Route path="/user/:userId" element={<UserProfile />} /></Routes>);
}// 在組件中使用 useParams
function UserProfile() {const { userId } = useParams<{ userId: string }>(); // TypeScript 類型標注return <div>User ID: {userId}</div>;
}

二、useParams 使用注意事項

1、參數未定義的可能性
如果 URL 路徑不匹配路由定義的動態參數，useParams 可能返回 undefined。需通過可選鏈操作符或默認值處理：

const { postId } = useParams();
const safePostId = postId ?? 'default-id'; // 處理可能的 undefined
```/
2、類型安全（TypeScript）
顯式定義參數類型以避免類型錯誤：```javascript
interface Params {postId: string;
}
const { postId } = useParams<Params>(); // postId 類型為 string | undefined

3、組件復用時的更新問題
當同一組件因參數變化重新渲染時，需通過 useEffect 監聽參數變化：

useEffect(() => {fetchData(userId!); // 假設 userId 必存在
}, [userId]);
```/
4、參數命名一致性
確保路由定義和組件中參數名稱一致：```javascript
// 錯誤示例：路由定義是 :userId，組件中使用 id
<Route path="/user/:userId" element={<UserProfile />} />
const { id } = useParams(); // id 為 undefined

5、嵌套路由參數
在嵌套路由中，子路由的參數會覆蓋父路由同名參數：

<Route path="/admin/:id"><Route path=":id" element={<AdminPanel />} /> // 內層 :id 覆蓋外層的 :id
</Route>

三、useParams 代碼示例與分析

場景：獲取博客文章內容

// 路由配置
<Routes><Route path="/blog/:postId" element={<BlogPost />} />
</Routes>// BlogPost 組件
import { useParams } from 'react-router-dom';function BlogPost() {const { postId } = useParams<{ postId: string }>();// 處理 postId 未定義的情況if (!postId) {return <div>Post not found!</div>;}// 根據 postId 獲取數據useEffect(() => {fetchPostContent(postId);}, [postId]);return <div>Displaying blog post: {postId}</div>;
}

四、useParams 開發中常見問題解決

1、參數解碼問題
URL 參數默認會被自動解碼。如需處理特殊字符（如空格 %20）：

const rawPostId = decodeURIComponent(postId!);

2、可選參數處理
使用可選參數語法（?）并在代碼中處理：

<Route path="/search/:query?" element={<SearchPage />} />// 組件內
const { query } = useParams();
const searchQuery = query || 'default-query';

五、總結

核心用途：提取動態路由參數。
關鍵注意點：處理 undefined、類型安全、參數命名一致性、組件更新邏輯。
最佳實踐：始終為參數設置類型（TypeScript），使用可選鏈或默認值，并通過 useEffect 監聽參數變化。
通過合理使用 useParams，我們可以高效實現動態路由功能，同時避免常見的參數處理陷阱。