react-router-dom 6.4.2处理URL查询参数路由匹配问题求助

你遇到的问题根源在于：React Router的path属性仅匹配URL的路径部分（即?之前的内容），不包含查询参数。你写的/?search=:keyword这种写法不符合路由匹配规则，所以请求会直接匹配到下方的/路径，渲染Home组件。另外，React Router 6已经移除了exact属性，这个配置现在是无效的。

下面是两种可行的解决方式：

方式一：通过查询参数动态切换组件 #

用useSearchParams钩子获取查询参数，根据是否存在search值来决定渲染哪个组件：

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

// 新建中间组件处理渲染逻辑
function RootPage() {
  const [searchParams] = useSearchParams();
  const keyword = searchParams.get('search');

  // 存在search参数则渲染搜索组件，否则渲染首页
  return keyword ? <SearchEng keyword={keyword} /> : <Home />;
}

// 修改路由配置
<Router>
  <Routes>
    <Route path='/' element={<RootPage />} />
  </Routes>
</Router>

方式二：路由内直接做条件判断（适合简单场景） #

如果不需要额外拆分组件，可以直接在路由的element中处理逻辑：

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

<Router>
  <Routes>
    <Route 
      path='/' 
      element={
        (() => {
          const [searchParams] = useSearchParams();
          const keyword = searchParams.get('search');
          return keyword ? <SearchEng keyword={keyword} /> : <Home />;
        })()
      } 
    />
  </Routes>
</Router>

两种方式的核心都是利用useSearchParams获取URL中的查询参数，再根据参数值动态渲染对应组件。推荐方式一，代码结构更清晰，便于后续维护。

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