react-router-dom 匹配以特定后缀结尾的路径

Question

我正在尝试将我的应用程序从react-router-dom v4升级到v6，我刚刚遇到一个问题，我有一个这样的路径。

<Route path="*/AlertWeb" render={() => <YourComponent />} />

，如果它以

/AlertWeb

结尾，基本上匹配所有内容，所以基本上它可以是

localhost:3000/AlertWeb

或

localhost:3000/login/AlertWeb

我意识到这在v6上不起作用我想知道是否有人知道是否可以这样做在 v6 中以及如何做

我尝试做同样的事情，但它不起作用，根据 chatGPT 这应该起作用，但它不起作用

<Route path="/(.*)/your-pattern" element={<YourComponent />} />

Answer 1

React-Router-DOM 6 根本不匹配这样的路由。您必须在每个嵌套级别显式声明每个路由才能重现此行为。

示例：

<Routes>
  <Route path="somePath">
    ...
    <Route path="someOtherPath">
      ...
      <Route path="anotherPath">
        ...

        {/* "/somePath/someOtherPath/anotherPath/alertweb" */}
        <Route path="alertweb" element={<AlertWeb />} />
      </Route>
      ...

      {/* "/somePath/someOtherPath/alertweb" */}
      <Route path="alertweb" element={<AlertWeb />} />
    </Route>
    ...

    {/* "/somePath/alertweb" */}
    <Route path="alertweb" element={<AlertWeb />} />
  </Route>
  ...

  {/* "/alertweb" */}
  <Route path="alertweb" element={<AlertWeb />} />
</Routes>