reactjs - 如何处理匹配同一路径的多个路由

Question

      <Routes>
        <Route path="cheese">
          <Route index element={<Home />} />
          <Route path="*" element={<Home />} />
        </Route>
        <Route path=":category">
          <Route index element={<Article />} />
          <Route path=":id">
            <Route index element={<Article />} />
            <Route path="*" element={<Article />} />
          </Route>
          <Route path="*" element={<Article />} />t
        </Route>
      </Routes>

上面，如果url的路径是/cheese/12345 ，这是匹配的第二个路由器，因此元素 <Article />已返回。

如何纠正这个问题？

我正在使用 React Router v6

Answer 1

react-router-dom@6路线始终与路径完全匹配，"/cheese/12345"与非常一般的 "/:category/:id" 完全匹配路由路径而不是特定的 "/cheese"路径。

嵌套的<Route path="*" element={<Home />} />在父项下"/cheese"路线也应该与 "/cheese/12345" 匹配.

如果您想删除 Home 的重复数据两个路由上的组件以及第一个匹配的路由 "/cheese"以及任何“子路由”/下降路径，那么它应该有一个通配符 "*"匹配器附加到路径。

示例:

<Routes>
  <Route path="/cheese/*" element={<Home />} />
  <Route path="/:category/:id" element={<Article />} />
</Routes>

如果您还想捕获任何奶酪 ID 值，则可以指定可选路径参数(仅限 RRDv6.5+)。

<Routes>
  <Route path="/cheese/:id?" element={<Home />} />
  <Route path="/:category/:id" element={<Article />} />
</Routes>