React Router v5：如何匹配/add开头的路由（排除/add/..格式）

• 问题原因：你使用的/add*在React Router v5中会被自动解析为/add/*，这会匹配所有包含/add/子路径的路由（比如/add/xxx），不符合你只匹配/add、/add_a、/add123这类路径的需求。

• 正确写法：使用正则表达式路径/add[^/]*，其中[^/]*表示匹配任意数量的非斜杠字符（包括零个，即/add本身），刚好满足你的需求：

  • 匹配：/add、/add_a、/add123、/add-abc等
  • 不匹配：/add/xxx、/add/123/abc等带斜杠的子路径

• 修正后的代码示例：

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

function App() {
  return (
    <Switch>
      <Route path="/add[^/]*" component={() => <div>TEST</div>} />
      {/* 其他路由 */}
    </Switch>
  );
}

注意：React Router v5中使用<Switch>组件来包裹路由，而非v6的<Routes>组件，若你误写了组件名称，需要及时修正。

• 补充说明：如果需要确保该路由的优先级高于其他可能冲突的路由，记得将其放在<Switch>中靠前的位置，因为<Switch>会匹配第一个符合条件的路由。

内容的提问来源于stack exchange，提问作者江虹章