如何正确在条件语句中包裹React Route解决路由匹配问题

开发者阿泽

2026-8-26

问题核心原因

你的代码有三个致命问题，导致第二条路由永远无法匹配：

正则逻辑完全写错：new RegExp('/?')中的?是正则量词，代表「匹配0次或1次/字符」，也就是说任何URL都会满足这个正则的匹配规则，!regex.test(theURL)永远返回false，locationTest()永远得不到true，第二条路由从始至终都不会被渲染。
路由判断没有接入React Router状态：你直接读取window.location.href做判断，没有订阅路由上下文的变化，就算正则写对，客户端路由跳转时也不会触发条件重新计算，只会在页面首次加载时执行一次判断。
路由匹配逻辑违背React Router设计：你给两个前缀完全相同的路由都加了exact属性，靠外层三元切换渲染Route的方式，本身就绕开了React Router内置的匹配优先级机制，很容易出现匹配错乱。

修复方案

优先用React Router内置的Switch组件做路由匹配，按「匹配精度从高到低」排列路由顺序，完全不需要额外写外层条件判断，稳定性最高：

首先把匹配规则更严格的详情页路由放在前面，路径直接写死你要匹配的/encounters-前缀，避免和列表页路由冲突
列表页路由放在后面，保留可选参数配置即可
用Switch包裹所有路由，它会从上到下匹配，命中第一个符合规则的路由就停止后续匹配

代码示例：

import { Switch, Route } from 'react-router-dom';

// 路由配置部分
<Switch>
  {/* 详情页：路径固定带/encounters-片段，优先匹配 */}
  <Route
    exact
    path="/encounter-monitor/encounters-:encounterID"
    component={EncounterMonitorDetails}
  />
  {/* 列表页：支持无参数、带可选queryData参数两种场景 */}
  <Route
    exact
    path="/encounter-monitor/:queryData?"
    component={EncounterMonitor}
  />
</Switch>

如果你一定要保留条件渲染Route的写法，必须修正正则，同时用useLocation钩子订阅路由变化，保证路由切换时能触发重渲染：

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

// 在路由组件内调用钩子，获取当前响应式的路由信息
const location = useLocation();
// 修正正则：匹配路径带/encounters-的详情页场景
const isDetailPage = /\/encounter-monitor\/encounters-/.test(location.pathname);

// 路由渲染部分
{!isDetailPage ? (
  <Route
    exact
    path="/encounter-monitor/:queryData?"
    component={EncounterMonitor}
  />
) : (
  <Route
    exact
    path="/encounter-monitor/:encounterID"
    component={EncounterMonitorDetails}
  />
)}

注意：永远不要在React Router的项目里直接读取window.location做路由判断，必须用库提供的useLocation、useParams等hooks获取路由状态，否则路由切换时不会触发组件重渲染，判断逻辑不会更新。

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