React中如何为所有路由设置默认queryString参数并重定向时保留

你当前手动拼接参数的方式虽然能生效，但是维护成本极高，一旦某个跳转点漏写参数就会丢失，推荐用全局封装的方式实现一劳永逸，不需要在每个跳转逻辑里手动拼接。

核心思路 #

把需要全局保留的参数（比如示例中的org）的注入逻辑收口到统一的跳转入口，不管是声明式的<Navigate>组件跳转，还是命令式的navigate()调用，都自动补上缺失的持久化参数，业务代码不需要感知参数拼接逻辑。

具体实现（React Router v6 适用） #

1. 先写统一的持久化参数获取工具 #

所有需要全局保留的查询参数都在这里统一维护，后续加新参数只需要改这一处：

const getPersistentSearchParams = () => {
  const currentUrlParams = new URLSearchParams(window.location.search);
  const orgValue = currentUrlParams.get('org') ?? '';
  // 要加其他全局保留的参数，直接在这里追加即可
  return new URLSearchParams({ org: orgValue });
};

2. 封装支持自动注入参数的声明式跳转组件 #

替换原生的Navigate组件，跳转时自动补全参数：

import { Navigate as RouterNavigate, NavigateProps } from 'react-router-dom';

export const Navigate = (props: NavigateProps) => {
  const { to, ...rest } = props;
  let targetPath = to;
  const persistParams = getPersistentSearchParams();

  // 处理字符串格式的跳转地址
  if (typeof to === 'string') {
    const urlObj = new URL(to, window.location.origin);
    persistParams.forEach((value, key) => {
      // 跳转时如果手动指定了该参数，优先用手动传入的值，不覆盖
      if (!urlObj.searchParams.has(key)) {
        urlObj.searchParams.set(key, value);
      }
    });
    targetPath = `${urlObj.pathname}${urlObj.search}${urlObj.hash}`;
  }

  // 处理对象格式的跳转地址
  if (typeof to === 'object' && to !== null) {
    const targetSearchParams = new URLSearchParams(to.search);
    persistParams.forEach((value, key) => {
      if (!targetSearchParams.has(key)) {
        targetSearchParams.set(key, value);
      }
    });
    targetPath = {
      ...to,
      search: targetSearchParams.toString() ? `?${targetSearchParams.toString()}` : ''
    };
  }

  return <RouterNavigate to={targetPath} {...rest} />;
};

3. 封装支持自动注入参数的命令式跳转Hook #

替换原生的useNavigate返回的跳转方法：

import { useNavigate as useRouterNavigate, To } from 'react-router-dom';

export const useNavigate = () => {
  const routerNavigate = useRouterNavigate();
  const persistParams = getPersistentSearchParams();

  return (to: To, options?: { replace?: boolean; state?: any }) => {
    let targetPath = to;

    if (typeof to === 'string') {
      const urlObj = new URL(to, window.location.origin);
      persistParams.forEach((value, key) => {
        if (!urlObj.searchParams.has(key)) {
          urlObj.searchParams.set(key, value);
        }
      });
      targetPath = `${urlObj.pathname}${urlObj.search}${urlObj.hash}`;
    }

    if (typeof to === 'object' && to !== null) {
      const targetSearchParams = new URLSearchParams(to.search);
      persistParams.forEach((value, key) => {
        if (!targetSearchParams.has(key)) {
          targetSearchParams.set(key, value);
        }
      });
      targetPath = {
        ...to,
        search: targetSearchParams.toString() ? `?${targetSearchParams.toString()}` : ''
      };
    }

    return routerNavigate(targetPath, options);
  };
};

使用方式 #

不需要再单独写useCustomParams拼接参数，直接用封装好的组件和Hook即可，参数会自动带上：

// 声明式重定向
<Route
  path="*"
  element={<Navigate to={`/group/${id}/users`} replace />}
/>

// 命令式跳转
const navigate = useNavigate();
navigate(`/group/${id}/users`);

注意点 #

• 如果跳转时手动给org传了新值，会优先使用你传入的值，不会被全局自动注入的逻辑覆盖
• 后续如果要新增其他需要全局保留的查询参数，只需要在getPersistentSearchParams方法里添加即可，不需要改业务代码

内容的提问来源于stack exchange，提问作者lemmusm