在 react-router-dom 中，useParams 是一个非常有用的 Hook，它允许你在路由组件中访问动态路由参数。动态路由参数是定义在 URL 路径中的占位符，通常用于从 URL 中提取特定的信息。
主要作用
useParams 的主要作用是从当前匹配的路由路径中提取动态参数，并将这些参数以对象的形式返回。这对于构建具有动态内容的页面非常有用，例如显示特定用户的详细信息或特定文章的内容。
基本用法
假设你有一个路由配置如下：
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route path='/user/:id' component={UserProfile} />
<Route path='/' component={Home} />
</Switch>
</Router>
);
}
在这个例子中，/user/:id 是一个动态路由，其中 :id 是一个参数。
使用 useParams 提取参数
在 UserProfile 组件中，你可以使用 useParams 来获取 :id 参数的值：
import React from 'react';
import { useParams } from 'react-router-dom';
function UserProfile() {
const { id } = useParams();
return (
<div>
<h1>用户资料</h1>
<p>用户 ID: {id}</p>
{/* 其他用户信息 */}
</div>
);
}
export default UserProfile;
多个参数
如果你有多个参数，useParams 返回的对象会包含所有这些参数。例如：
<Route path='/user/:id/post/:postId' component={UserPost} />
在 UserPost 组件中：
import React from 'react';
import { useParams } from 'react-router-dom';
function UserPost() {
const { id, postId } = useParams();
return (
<div>
<h1>用户帖子</h1>
<p>用户 ID: {id}</p>
<p>帖子 ID: {postId}</p>
{/* 其他帖子信息 */}
</div>
);
}
export default UserPost;
类型安全
为了提高代码的类型安全性，可以使用 TypeScript 来定义参数类型。例如：
import React from 'react';
import { useParams, useParams as useTypedParams } from 'react-router-dom';
interface UserParams {
id: string;
}
const useUserParams = () => useTypedParams<UserParams>();
function UserProfile() {
const { id } = useUserParams();
return (
<div>
<h1>用户资料</h1>
<p>用户 ID: {id}</p>
{/* 其他用户信息 */}
</div>
);
}
export default UserProfile;
在这个例子中，我们定义了一个 UserParams 接口，并创建了一个自定义的 useUserParams Hook 来确保 useParams 返回的对象符合预期的类型。
总结
useParams 是 react-router-dom 提供的一个非常强大的 Hook，它使得在路由组件中访问和使用动态路由参数变得简单而直观。通过结合 TypeScript，你还可以进一步增强代码的类型安全性和可维护性。