React Router动态特殊字符不生效，点击搜索图标无法跳转至搜索页是什么原因

问题原因及解决方法 #

核心错误原因 #

React Router 的 Route 组件的 path 属性仅匹配 URL 中 ? 之前的路径部分，查询参数不会参与路由匹配，你将完整带查询串的路径写在 path 中会导致路由永远无法匹配，所以点击跳转后找不到对应渲染组件。

其他可能的触发原因 #

• 如果你使用的是 React Router v6 及以上版本，你当前代码里的 Switch 组件、component 路由属性都是 v5 废弃 API，无法正常工作。
• 初始化时 Redux 中 selectedId 还未加载完成，outlet_id 为 undefined/null，导致初始注册的路由 path 和后续 Link 跳转的路径不匹配，且 Route 的 path 不会随 outlet_id 变化自动更新，也会匹配失败。
• 应用存在重复嵌套的 Router 组件，Link 属于子 Router 作用域，和外层写 Route 的 Router 不互通，跳转无法触发外层路由更新。

修复步骤 #

1. 修正路由 path 配置，删除查询参数，仅保留路径部分：

// App.js 修正后的 Route 配置
<Route
  path="/search"
  component={SearchCategoryPage}
/>

查询参数可以在 SearchCategoryPage 组件内通过 useLocation 或者 useSearchParams 获取使用。

2. 如果你使用 React Router v6，修改为 v6 标准路由写法：

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

<Router>
  <Routes>
    <Route path="/search" element={<SearchCategoryPage />} />
  </Routes>
</Router>

3. 检查整个应用的 Router 嵌套情况，确保仅在根组件外层包裹一个 Router，所有子组件内的 Link 都在同一个 Router 作用域下。

4. 如果需要做参数合法性校验，可以在 SearchCategoryPage 组件内部获取查询参数和 Redux 存储的 outlet_id 对比，不符合要求再做拦截跳转即可。

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