javascript - 将嵌套路线优先于主路线

Question

设置

我有一个 App 组件呈现以下路由:

<Route path="/items/:id" component={ItemDetail} />
<Route path="/items" component={AllItems} />

在我的 AllItems 组件中，我呈现了所有项目的列表以及创建新项目或更新现有项目的选项。执行这些操作之一会打开一个弹出窗口。为此，我在 AllItems 中呈现以下路线:

<Route path="/items/add" component={AddItemModal} />
<Route path="/items/edit" component={EditItemModal} />

注意:重要的是这些模式实际上链接到这些路线，我无法更改它。我也不能在 AllItems 之外渲染这些路由，因为我需要将 soms Prop 传递给模态框。

---

问题

当我转到像 /items/1 这样的路线时:ItemDetail 呈现(如预期)。

当我转到 /items/add 时:ItemDetail 使用 add 呈现为 :id。我需要它按照 AllItems 中的定义在此处呈现 AddItemModal。

我尝试了什么:

• 我尝试将 exact 添加到 /items/:id 路由，我还尝试将它添加到 /items/add & /项目/编辑。这些解决方案均无效。要么只渲染 ItemDetail，要么只渲染模式。
• 我尝试在 /items/:id 之前定义 /items 以希望为嵌套路由提供更高的优先级。 ItemDetail 在这种情况下从未呈现。

是否有解决方案，以便我可以优先考虑 items/add 和 items/edit 而不是 items/:id

Answer 1

尝试将路由嵌套在 /items 下

<Route
path="/items"
render={() => (
  <>
    <Route path="" component={AllItems} exact />
    <Route path="/add" component={AddItemModal} />
    <Route path="/edit" component={EditItemModal} />
    <Route path="/:id" component={ItemDetail} />
  </>
)}
/>