React Router：如何使单一路径匹配/test/login与/test/again/login？

完全不用新增路由，改一下现有路径的匹配规则就行。

原来的:siteid是单段路径匹配，只能匹配不包含/的单个路径片段，所以只能命中/test/login。要让它同时匹配/test/again/login这种多段路径，只需要给动态参数加上匹配多段的修饰符。

在react-router-dom v6+里有两种方式：

• 用*：匹配0或多个路径段（允许直接访问/login）
• 用+：匹配1或多个路径段（必须有至少一段siteid，比如/test/login、/test/again/login，但/login不会被匹配）

根据你的需求，推荐用+更严谨，修改后的代码如下：

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path={`/:siteid+/login`} element={<LoginLayout />} />
    </>
  )
);

如果允许/login也被匹配，就换成*：

<Route path={`/*siteid/login`} element={<LoginLayout />} />

之后在组件里通过useParams()获取参数时，siteid会对应完整的路径片段：

• 访问/test/login → siteid = "test"
• 访问/test/again/login → siteid = "test/again"

示例组件代码：

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

function LoginLayout() {
  const { siteid } = useParams();
  // 这里可以根据siteid的值做相应逻辑
  return <div>Login Page for {siteid}</div>;
}

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