解决函数式组件获取URL参数以及TypeScript中`UseParams`解构报错问题

在React函数式组件中，获取URL参数通常需要使用useLocation hook。这个hook返回一个包含pathname和search的location对象。你可以使用searchParams模块来解析URL中的查询参数。下面是一个示例代码：

import { useLocation } from 'react-router-dom';
import { SearchParams } from 'url';
function MyComponent() {
const location = useLocation();
const searchParams = new URLSearchParams(location.search);
const param1 = searchParams.get('param1');
const param2 = searchParams.get('param2');
// 在这里可以使用获取到的参数进行操作
// ...
return (
// 渲染组件的逻辑
);
}

在上面的代码中，我们首先使用useLocation hook获取当前组件的location对象。然后，我们使用URLSearchParams构造函数创建一个新的SearchParams实例，并将location.search作为参数传递给它。这样，我们就可以使用get方法来获取URL中的参数值了。
在TypeScript中使用UseParams时，可能会遇到类型错误或编译错误。这通常是因为TypeScript无法正确推断出UseParams的类型。为了解决这个问题，你可以使用类型断言来明确指定你期望的类型。下面是一个示例代码：

import { useParams } from 'react-router-dom';
function MyComponent() {
const { param1, param2 } = useParams<{ param1: string; param2: number }>();
// 在这里可以使用获取到的参数进行操作
// ...
return (
// 渲染组件的逻辑
);
}

在上面的代码中，我们使用类型断言来明确指定我们期望的参数类型。这样，TypeScript就能够正确推断出UseParams的类型，并避免出现类型错误或编译错误。
总结起来，通过使用useLocation hook和URLSearchParams模块，你可以在函数式组件中轻松获取URL参数。在TypeScript中使用UseParams时，通过类型断言来明确指定参数类型，可以避免出现类型错误或编译错误。希望这些示例代码和解释能帮助你解决在开发过程中遇到的问题。