为什么React Router的Route路径中不能直接使用querystring？如何实现？

核心原因 #

React Router（含v5/v6所有主流版本）的路由匹配逻辑仅校验URL的路径部分，?后面的查询字符串（Query String）不会参与路由匹配规则计算。你把?page=1写入Route的path属性后，相当于要求实际路径必须包含?字符才能命中，但URL中?是路径和查询参数的法定分隔符，不属于路径部分，自然会匹配失败报404。

如果你确实需要强制匹配指定查询参数才能命中路由，可以用以下实现方案： #

方案1：React Router v5 写法

在Route的render回调中校验查询参数：

// App.js
<Route
  exact
  path="/support_main/notice"
  render={props => {
    // 校验查询参数是否符合要求
    if (props.location.search === '?page=1') {
      return <Pages.support_notice_list {...props} />
    }
    // 不符合参数要求可以跳转到404或者其他页面
    return <Redirect to="/404" />
  }}
/>

// link.js 正常写带参数的跳转即可
<Link to="/support_main/notice?page=1" className="menu-list-link">
  <ListItemText
    primary={item.text}
    className="munu-list-text"
  />
</Link>

方案2：React Router v6 写法

在组件内用useSearchParams校验参数，或者封装自定义路由组件：

// App.js
<Route
  path="/support_main/notice"
  element={<NoticePage />}
/>

// NoticePage 组件内部校验
import { useSearchParams, Navigate } from 'react-router-dom'
function NoticePage() {
  const [searchParams] = useSearchParams()
  if (searchParams.get('page') !== '1') {
    return <Navigate to="/404" replace />
  }
  // 正常渲染页面逻辑
}

补充说明 #

官方设计上本来就不推荐把查询参数写入路由的path配置，查询参数的定位就是给页面组件传递附加信息，不属于路由路径的一部分。你平时正常用不带查询参数的path配置路由，跳转时带查询参数，组件内直接取参数使用即可，完全不影响正常业务逻辑。

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