React Router Dom刷新时无法识别带query params的URL问题求助

React Router 的路由匹配规则仅识别URL的路径部分（即?之前的内容），你在PrivateRoute的path属性中填写查询参数匹配规则的写法不符合框架设计，因此页面刷新时路由无法命中/search对应的规则，直接触发兜底的重定向逻辑。

1. 修正路由配置 #

删除path中查询参数相关的匹配规则，仅保留纯路径：

// App.tsx
<PrivateRoute path="/search">
  <Dashboard />
</PrivateRoute>
<Route path="/redirection" component={RedirectionPage} />
<Redirect to="/login" />

2. 在页面组件内解析查询参数 #

进入/search页后，主动读取URL中的查询参数做业务逻辑处理：

• 如果你使用的是React Router v5版本：

// Dashboard.tsx
import { useLocation } from 'react-router-dom';

const Dashboard = () => {
  const location = useLocation();
  // 解析查询参数
  const urlParams = new URLSearchParams(location.search);
  // 读取对应参数值，若有多个同key参数可使用getAll方法
  const searchValue = urlParams.get('value');
  const searchType = urlParams.get('type');

  // 后续处理逻辑：拿到参数后发起搜索请求等
}

• 如果你使用的是React Router v6版本，可以直接使用官方提供的useSearchParams钩子更方便的读取参数：

// Dashboard.tsx
import { useSearchParams } from 'react-router-dom';

const Dashboard = () => {
  const [searchParams] = useSearchParams();
  const searchValue = searchParams.get('value');
  const searchType = searchParams.get('type');
}

3. 可选优化：规范跳转写法 #

React Router的history.push方法支持单独传入search字段设置查询参数，不需要手动拼接在pathname上，写法更可靠不易出错：

// Search.tsx
history.push({
  pathname: '/search',
  search: formattedSearch
    .map((search) => `value=${search.value}&type=${search.type}`)
    .toString()
    .replace(",", "|"),
  state: search
});

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