React Router路由问题：如何阻止路由匹配穿透？

这个问题其实是React Router默认匹配机制导致的——默认是模糊匹配，也就是说只要路径是目标路由的前缀就会匹配成功，所以当你访问/test/xxx时，/test作为它的前缀也会被匹配到，就出现了两个组件同时渲染的情况。下面分两种React Router版本给你解决方案：

如果你用的是React Router v5（及更早） #

核心是用Switch组件包裹你的路由，它的作用就是只渲染第一个匹配成功的路由，同时记得把更具体的路由（带参数的/test/:name）放在前面：

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

// 你的SecureRoute用法和普通Route一致
<Switch>
  <SecureRoute path='/test/:name' component={SpecificTest} />
  <SecureRoute path='/test' component={TestList} exact />
</Switch>

这里给/test加上exact是双重保障，确保只有当路径完全等于/test时才匹配，避免和其他子路由冲突。

如果你用的是React Router v6 #

v6版本已经把Switch换成了Routes组件，而且默认就是精确匹配，不过同样要注意路由顺序，把更具体的路由放在前面：

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

<Routes>
  <SecureRoute path='/test/:name' element={<SpecificTest />} />
  <SecureRoute path='/test' element={<TestList />} />
</Routes>

注意v6里component属性换成了element，需要直接传入组件实例（比如<SpecificTest />而不是SpecificTest）。Routes会自动只匹配第一个符合条件的路由，所以访问/test/xxx时只会渲染SpecificTest，访问/test时只会渲染TestList。

额外提醒 #

不管用哪个版本，路由顺序非常重要——一定要把更具体、更特殊的路由（比如带参数的、带子路径的）放在前面，通用的路由放在后面，这样才能保证匹配逻辑符合预期。

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