With multiple dynamic segments, Remix calls correct loaders but renders wrong component

[avaragado]

What version of Remix are you using?

1.17.1

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

https://stackblitz.com/edit/remix-run-remix-qx5leh?file=app%2Froutes%2F_index.tsx

From the home page, click to each different URL, then click Home

Expected Behavior

Three separate routes are defined:

• $aaa.tsx
• $aaa.$bbb.tsx
• $aaa.xxx.$bbb.tsx

Each route's default export component renders text that shows which component was rendered.

I would expect clicking the three different URLs in the home page to render each of the three components.

Actual Behavior

Only one component is ever rendered: the default export from $aaa.tsx

Note that each route's loader is CORRECTLY called: in the console, each LOADER message corresponds to the route for the link clicked.

[kiliman]

Since you are using v2 routing, you need to make sure your parent-child layouts are correct.

Your current route structure looks like this.

<Routes>
  <Route file="root.tsx">
    <Route index file="routes/_index.tsx" />
    <Route path=":aaa" file="routes/$aaa.tsx">
      <Route path="xxx/:bbb" file="routes/$aaa.xxx.$bbb.tsx" />
      <Route path=":bbb" file="routes/$aaa.$bbb.tsx" />
    </Route>
  </Route>
</Routes>

• /111 renders the $aaa route, which is correct

• /111/222 renders both the $aaa route and the $aaa.$bbb routes, but since Remix thinks that $aaa is the parent layout, it expects an <Outlet>. That is why you're not seeing the output from the $aaa.$bbb route.

• /111/xxx/222 is the same. Remix renders both routes, but thinks $aaa is the parent layout. Remember, Remix treats the longest common prefix as the parent layout. Since there's no $aaa.xxx route, it goes up and finds $aaa.

If you don't want $aaa to be a parent layout, then you need to let Remix know by putting a trailing _, like: $aaa_.$bbb and $aaa_.xxx.$bbb. That will render each route with the root as the parent layout.

Now you'll see that all the routes nest under root.

<Routes>
  <Route file="root.tsx">
    <Route path=":aaa/xxx/:bbb" file="routes/$aaa_.xxx.$bbb.tsx" />
    <Route path=":aaa/:bbb" file="routes/$aaa_.$bbb.tsx" />
    <Route index file="routes/_index.tsx" />
    <Route path=":aaa" file="routes/$aaa.tsx" />
  </Route>
</Routes>

/111/222

/111/xxx/222

https://remix.run/docs/en/main/pages/v2#file-system-route-convention

[avaragado]

Ah, of course! Thanks.

My brain fixated on the apparent discrepancy between loader and component and I'd forgotten all about the _ suffix.

[kiliman]

It would be nice if Remix could warn you if you have a parent layout without an <Outlet>.