Nested route added by remix does not work, programmatically added one does work

[smucode]

👋

This is how my routes look:

<Routes>
  <Route file="root.tsx">
    ...
    // the following routes are added by remix
    <Route path="user/:userId" file="routes/user.$userId.tsx">
      <Route path="delete" file="routes/user.$userId.delete.tsx" />
      // route below does not work, parent route is always rendered
      <Route path="edit" file="routes/user.$userId.edit.tsx" />
    </Route>
    ...
    // the following routes i've added programmatically in the routes section of remix.config.js
    <Route path="customers/:customerId/user/:userId/delete" file="routes/user.$userId.delete.tsx" />
    // route below does work
    <Route path="customers/:customerId/user/:userId/edit" file="routes/user.$userId.edit.tsx" />
    <Route path="customers/:customerId/user/:userId" file="routes/user.$userId.tsx" />
    ...
  </Route>
</Routes>

The route users/:userId/edit does not work, the route users/:userId is always rendered.

These routes are added by remix based on the file structure.

Since users can belong to customers, or not. I programatically add the /customers/ mirror routes based on the filesystem. Difference afaik i can tell is that they are not nested when i do npx remix routes.

The route /customers/:customerId/users/:userId/edit does work as expected.

Anyone have any idea what's causing this?

On the latest version of everything, and opted into all the v2 stuff.

Thanks :)

[kiliman]

Does routes/user.$userId.tsx have an <Outlet/>?

Currently, you have the edit route nested under the parent. If you don't want it nested, rename the route to routes/user.$userId_.edit.tsx. The trailing underscore means, "don't use this as a parent route."

For more info: https://remix.run/docs/en/1.19.3/file-conventions/route-files-v2#nested-urls-without-layout-nesting

[smucode]

Thanks @kiliman - that was the issue 👍