前言：
今天是改别人的代码，然后从首页要进到目前写的这个页面，这个页面有许多tab，首页进来要带个key值，然后能够精准的跳到该页面对应的tab上，但是…
他本来的路径是这样的：
{
path: '/3.0/project/management',
element: withSuspense(managementList),
}
我想改成这样：
{
path: '/3.0/project/management/:key',
element: withSuspense(managementList),
}
但是这样就有点麻烦了，因为该页面本身都有默认key，并且每个tab上都有对应的key，还要做一些判断，甚是麻烦，才是就想到了useSearchParams，哈哈哈哈。
useSearchParams
介绍：
它是React Router库中的一个自定义Hook，用于在函数组件中获取和管理URL查询参数。它让我们能够方便的读取和更新当前页面URL中查询参数，并将其与组件的状态进行关联。
使用方法：
- 安装并引入react-router-dom库
- 在需要访问查询参数的组件中，使用useSearchParams钩子函数
- 调用useSearchParams,会返回有两个参数的数组
- 使用结构语法从返回的数组中提取所需参数
具体使用：
首页用到该路径的代码
const changeTab = (type: string) => {
handleTab("管理", 10, "/3.0/project/management?keys=" + type)
};
...
onClick={
() => {
changeTab ("outOfStock");
} }>
在该组件中获取keys的值：
import {
useSearchParams } from "react-router-dom";
const management = ()=>{
const tabsKeys = [
{
key: 'onsale', label: '已上架' },
{
key: 'down', label: '待上架' },
{
key: 'outOfStock', label: '商品不足' }
]
const [searchParams, setSearch] = useSearchParams();
const [activeKey, setActiveKey] = useState<any>(Object.fromEntries([...searchParams])?.keys|| tabsKeys[0]?.key);
const tabOncChange = (key: string) => {
setActiveKey(key);
setSearch({
itemTab: key});
}
return <proTable
...
toolbar={
{
multipleLine: true,
tabs: {
activeKey,
onChange: tabOncChange ,
....
}
}}/>
}
export default management ;
好了，差不多就这样用的。
