如何使用Navigate组件捕获原路由查询字符串并传递至重定向路由？

我当前使用以下代码配置路由：

createBrowserRouter(
  createRoutesFromElements(...)
);

其中嵌套了这条路由规则：

<Route index element={<Navigate to="/raters/start/" />} />

该配置在基础URL下运行正常，但现在需要捕获原路由的所有查询字符串/searchParams，并在重定向时将其传递过去。想知道是否存在类似以下的可行实现方式：

<Route
  index
  path="?:queryString"
  element={<Navigate to={`/raters/start?${queryString}`} />}
/>

你设想的通过path捕获整个查询字符串的方式不可行，因为React Router的path参数仅匹配URL的路径部分，无法直接捕获查询参数。正确的做法是借助React Router的钩子来获取当前查询参数，再传递到目标路径。

具体实现 #

1. 编写自定义重定向组件，处理参数传递逻辑：

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

const RedirectWithSearchParams = () => {
  const [searchParams] = useSearchParams();
  const queryString = searchParams.toString();
  const targetPath = queryString ? `/raters/start?${queryString}` : '/raters/start';
  return <Navigate to={targetPath} replace />;
};

2. 在路由配置中替换原有的Navigate组件：

<Route index element={<RedirectWithSearchParams />} />

说明 #

• useSearchParams钩子用于获取当前URL的查询参数对象，调用toString()可将其转换为完整的查询参数字符串（不含开头的?，所以拼接时需手动添加）。
• 添加replace属性可以让重定向替换当前历史记录条目，避免用户点击后退时回到原基础URL，提升交互体验。

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