React Router v6 无URL查询参数时路由重定向配置问题

React Router v6 的路径匹配逻辑不会将查询参数（queryString）纳入路径匹配判断范围，查询参数保存在location.search字段中，独立于路径段存在。
你当前代码中path="search"规则会命中所有路径为/search的请求，无论URL是否携带查询参数，因此所有访问/search的请求都会直接触发重定向。后续的path="search/*"规则永远不会生效——该规则的通配符*仅匹配/search/后的子路径段，不会匹配查询参数部分。

删除冗余的search/*路由，将search路径的逻辑合并为单条路由，在渲染逻辑中判断当前请求是否携带查询参数，再决定执行重定向还是渲染目标组件。

最简实现 #

import { Routes, Route, Navigate, useLocation } from 'react-router-dom';

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Search />} />
    <Route 
      path="search" 
      element={
        new URLSearchParams(useLocation().search).toString().length 
          ? <Movies /> 
          : <Navigate to="/" replace />
      } 
    />
  </Route>
</Routes>

逻辑说明：

• 通过useLocation()钩子获取当前路由信息，location.search即为?开头的查询参数字符串
• 借助原生URLSearchParams解析查询字符串，若解析后内容长度大于0，说明URL携带了查询参数，正常渲染Movies组件；否则重定向到根路径
• 给Navigate加上replace属性，避免重定向记录在浏览器历史栈中导致返回键行为异常

可维护性优化（可选） #

如果内联判断逻辑过于杂乱，可以抽离成独立的路由守卫组件：

const SearchPageGuard = () => {
  const { search } = useLocation();
  const hasValidQuery = new URLSearchParams(search).toString().length > 0;
  return hasValidQuery ? <Movies /> : <Navigate to="/" replace />;
};

// 路由配置简化为
<Route path="search" element={<SearchPageGuard />} />

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