前端开发工作随记从路由search中解析query params ` function parseQuery() { }

1.debugger不生效

（1）打开webpack配置文件，即config-overrides.js文件

（2）在webpack函数中找到以下代码块：

(config) => {
  // ...
   config.optimization.minimize = true;
}

（3）将其修改为：

config.optimization.minimize = false;

（4）保存文件并重新运行，debugger即可生效

注：禁用代码压缩可能会影响应用程序的性能和加载速度，因此建议在调试完成后将其恢复为原始配置。

2. 从路由search中解析query params

（1）react-router-dom@"6.16.0"

  const navigate = useNavigate();
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const searchParam = searchParams.get("param");

(2)手写函数

法一：

function parseQuery() {

    const search = window.location.search
    if(!search || !search.includes('?') || search.endsWith('?')) {
    return {}
    }
    
    const queryParams = {}
    let query = search.split('?')[1]
    let paramPairs = query.split('&')
    paramPairs.forEach(item => {
        const num = item.indexOf('=')
        if(num>0){
            const name = item.substring(0,num)
            let value = decodeURIComponent(item.substr(num+1))
            if(value && value.includes(',')){
                value=value.split(',')
            }
            queryParams[name]=value
        }
    })
    return queryParams
}
const search = parseQuery()

法二：

function parseQuery2(paramKey) {
    var reg = new RegExp("(^|&)" + paramKey + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return '';
},
const key = parseQuery2('key'),

3.路由传参跳转

<Link
    to={`/app/version?packageName=${encodeURIComponent(search.packageName)}`}
>
    <Button>确定</Button>
</Link>