score:2

Accepted answer

try nesting the routes under /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} />
  </>
)}
/>

score:0

if you want to have an independent views for itemdetail and allitems but at the same time have /items/add and /items/:id/edit (took a little liberty with the url, you need and id to edit an item right?) as modals over allitems so the structure of the routes would be something like this:

  • allitemsview (/items)
    • additemmodal (/items/new)
    • edititemmodal (/items/:id/edit)
  • itemdetailview (/items/:id)

you need a little tweak of tnc andrei response:

  <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} />
        </>
      )
    }}
  />

Related Query

More Query from same tag