React Router V6中如何使用<Route>保留查询参数？

React Router的Route组件本身并不直接处理search参数（查询参数），它属于路由location对象的一部分，相关处理逻辑在导航API和查询参数钩子中。以下是几种确保路由切换后查询参数保留的实用方法：

1. 使用useSearchParams钩子手动传递参数 #

通过useSearchParams获取当前查询参数，在导航时将其附加到新路由上：

import { useSearchParams, useNavigate } from 'react-router-dom';

function YourComponent() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();

  // 封装带参数的导航函数
  const goToRoute = (path) => {
    const currentQuery = searchParams.toString();
    navigate({
      pathname: path,
      search: currentQuery,
    });
  };

  return (
    <button onClick={() => goToRoute('/new-path')}>
      跳转到新路由并保留参数
    </button>
  );
}

2. 封装带参数的自定义Link组件 #

如果使用Link组件导航，可以封装一个自动合并当前查询参数的组件，避免每次手动传递：

import { Link, useSearchParams } from 'react-router-dom';

function PersistParamsLink({ to, ...props }) {
  const [searchParams] = useSearchParams();
  
  // 解析目标路径的现有参数，合并当前查询参数（目标参数优先）
  const targetUrl = new URL(to, window.location.origin);
  const targetParams = new URLSearchParams(targetUrl.search);
  
  searchParams.forEach((val, key) => {
    if (!targetParams.has(key)) {
      targetParams.set(key, val);
    }
  });

  return (
    <Link
      {...props}
      to={{
        pathname: targetUrl.pathname,
        search: targetParams.toString(),
      }}
    />
  );
}

// 使用示例
<PersistParamsLink to="/about">关于页（保留参数）</PersistParamsLink>

3. 全局拦截导航（高级场景） #

如果需要全局范围内所有路由切换都保留查询参数，可以通过useEffect监听路由变化，实现自动参数同步（需谨慎使用，避免覆盖业务所需的参数清空逻辑）：

import { useEffect, useNavigate, useLocation } from 'react-router-dom';

function PersistParamsGuard() {
  const navigate = useNavigate();
  const location = useLocation();
  const [searchParams] = useSearchParams();

  useEffect(() => {
    // 仅在路径变化且参数不一致时同步，避免循环导航
    const currentQuery = searchParams.toString();
    if (location.search !== currentQuery) {
      navigate({
        ...location,
        search: currentQuery,
      }, { replace: true });
    }
  }, [location.pathname, searchParams, navigate]);

  return null;
}

// 在路由根组件中引入
<Routes>
  <Route element={<PersistParamsGuard />} />
  {/* 其他业务路由 */}
</Routes>

注意：如果某些场景需要清空特定参数，可以在导航时手动修改searchParams对象（如searchParams.delete('key')）后再传递。

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