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道具传递给模态。

问题

当我走到/items/1之类的路线时：ItemDetail呈现（按预期）。

当我转到/items/add时：ItemDetail使用add作为:id进行渲染。我需要它来按照AddItemModal的定义在此处渲染AllItems。

我尝试过的事情：

我尝试将exact添加到/items/:id路由，也尝试将其添加到/items/add和/items/edit。这些解决方案均无效。只能渲染ItemDetail，也可以只渲染模态。
我尝试在/items之前定义/items/:id，以期给嵌套路由以更高的优先级。 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} />
  </>
)}
/>

Answer 2

如果您想对ItemDetail和AllItems拥有独立的意见，但同时拥有/items/add和/items/:id/edit（对URL稍加自由，您需要和ID来正确编辑项目吗？）作为AllItems上的模态，因此路线的结构将如下所示：

AllItemsView（/项目）
- AddItemModal（/项目/新）
- EditItemModal（/ items /：id / edit）
ItemDetailView（/ items /：id）

您需要对Tnc Andrei的响应进行一些调整：

  <Route
    path="/items"
    render={({ match: {url, isExact}, location: {pathname} }) => {
      let pathnameArray = pathname.split("/")
      let lastChunk = pathnameArray[pathnameArray.length - 1]
      if (isExact || lastChunk === "new" || lastChunk === "edit") {
        return (
          <>
            <Route path={`${url}/`} component={CompetitionsView} />
            <Switch>
              <Route path={`${url}/new`} component={CompetitionFormModal} />
              <Route path={`${url}/:competitionId/edit`} component={CompetitionFormModal} />
            </Switch>
          </>
        )
      }
      return (
        <>
          <Route path={`${url}/:competitionId`} component={CompetitionView} />
        </>
      )
    }}
  />

优先于主要路线嵌套路线

设置

问题

2 个答案: