React中的useSearchParams钩子_usesearchparam实现

前言：

今天是改别人的代码，然后从首页要进到目前写的这个页面，这个页面有许多tab，首页进来要带个key值，然后能够精准的跳到该页面对应的tab上，但是…
他本来的路径是这样的：

  {
    path: '/3.0/project/management',
    element: withSuspense(managementList),
  }
1
2
3
4

我想改成这样：

 {
    path: '/3.0/project/management/:key',
    element: withSuspense(managementList),
  }
1
2
3
4

但是这样就有点麻烦了，因为该页面本身都有默认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");
 } }>
1
2
3
4
5
6
7

在该组件中获取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 ;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

好了，差不多就这样用的。