Search code examples
remixremix.run

Conventional Route Folders only returns root page

I'm just starting with Remix and struggling to understand the Route system.

Looking at the documentation around Conventional Route Folders it seems to me I should be able to create URL structures like the below to create a page like /test and also have a page like /test/dynamic-route which will provide a param value - but Remix will only ever return the root /test page (try following this links on this test page).

So my questions are:

  • Why does it always redirect to the folder root page (/test)
  • What's the difference between /test/route.tsx and /test._index/route.tsx? Do I need them both?

As I'm very new to this metaframework I'm sure I'm missing something simple.

enter image description here

I've created a StackBlitz example of the issue I'm seeing here - feel free to fork / play!

Solution

  • The test/route.tsx is the parent layout for all the test/* routes. If you want to render your child routes, you need an <Outlet> (think of it is the children prop).

    test/_index/route.tsx is the index route, and matches the /test/ URL. The contents will be rendered in the <Outlet> from test/route.tsx.

    If you run npx remix routes, you'll see the route structure.

    ❯ npx remix routes
<Routes>
  <Route file="root.tsx">
    <Route index file="routes/_index/route.tsx" />
    <Route path="test" file="routes/test/route.tsx">
      <Route path=":paramId" file="routes/test.$paramId/route.tsx" />
      <Route index file="routes/test._index/route.tsx" />
      <Route path="sub" file="routes/test.sub/route.tsx" />
    </Route>
  </Route>
</Routes>

    Here's my fork that fixes the layout.

    https://stackblitz.com/edit/remix-run-remix-kl2as5?file=app%2Froutes%2Ftest%2Froute.tsx