Nested route with multiple parameters not serving

[pburrows]

I have routes:

p._index.tsx
p.$project.i.$item.tsx
p.$project.i.tsx
p.$project.tsx
p.tsx

npm remix routes shows:

<Routes>
  <Route file="root.tsx">
    <Route index file="routes/_index.tsx" />
    <Route path="p" file="routes/p.tsx">
      <Route path=":project" file="routes/p.$project.tsx">
        <Route path="i" file="routes/p.$project.i.tsx">
          <Route path=":item" file="routes/p.$project.i.$item.tsx" />
        </Route>
      </Route>
      <Route index file="routes/p._index.tsx" />
    </Route>
  </Route>
</Routes>

but when I browse to http://localhost:3000/p/project-name/i/123

The page for p.$project.tsx shows and neither the .i nor the .i.$item route ever show.

Do I have this set up incorrectly? Or is there something else I am doing wrong?

Thanks!

[pburrows]

To answer my own question, the p.$project.tsx was acting as the layout file for all the routes beneath it. I need to add an <Outlet /> to that file and create a p.$project._index.tsx as the default page for that route.

[jordanful]

This really tripped us up, too. Thanks!