一个 获取url携带的参数 Hook
# 使用
根据 window.location 直接返回 URL 中查询参数(? 后面的参数)的对象表示
相比较
react-router-dom
的好处未注册的路由变更,即使某个路由没有在
react-router-dom
中注册,只要浏览器地址栏发生变化,window.location 也会反映这个变化,这个组件还是可以用非 SPA 场景,在多页面应用(MPA)或某些混合架构中,也可以用
# 实现代码
点击 展开/收起 jsx 代码
/**
* @des 获取路由中 ? 后面的参数
*/
import React from 'react';
const useUrlParams = () => {
const { search } = window.location;
const params = new URLSearchParams(search);
// 将参数转换为对象
const paramsObj = {};
for (const [key, value] of params.entries()) {
paramsObj[key] = value;
}
return paramsObj;
};
export default useUrlParams;