Using routes/_index.tsx as the layout for child routes | Remix | Page 1

hot agate May 19, 2024, 11:58 PM

#

My current folder structure is as follows:

routes/
  ├── _index.tsx
  └── contacts.$contactId.tsx

I want to use _index.tsx as the layout for /contacts/$contactId and other routes, but currently, /contacts/$contactId is being rendered as a separate route instead of as a child route of _index.tsx.

I tried using root.tsx as the base, but it limits flexibility because I want to render different layouts (footer, menu, etc.) for different sections, such as the admin page. To my knowledge, it’s not possible to override the Layout export from root.tsx.

The _index.tsx file contains an Outlet component. I expected that routes matching _index.tsx (like /contacts/$contactId) would automatically be rendered inside _index's Outlet. However, they are being rendered in the root.tsx Outlet instead.

Could anyone help me resolve this issue?

mental flint May 20, 2024, 1:04 AM

#

routes/
  ├── _main.tsx
  ├── _main._index.tsx
  └── _main.contacts.$contactId.tsx

hot agate May 20, 2024, 10:45 AM

#

Thanks! much appreciated. Guess I shouldn't be trying out new stuff at 2am

vocal cairn May 20, 2024, 8:03 PM

#

Also to clarify, Remix doesn't let you use an index route (any route named _index) as a layout route. They can't have child routes. As Alex showed, you want to use pathless layouts. They create a separate layout branch and all child routes will inherit that layout.

https://remix.run/docs/en/main/file-conventions/routes#nested-layouts-without-nested-urls

hot agate May 21, 2024, 8:34 PM

#

Thank you! To me personally I think it would be awesome if we could use the Layout export in each of the routes to overwrite the base Layout

vocal cairn May 21, 2024, 10:53 PM

#

You could use the handle export to define a custom <Layout> then in your root, check to see if it's defined or use the default.

// root.tsx
function DefaultLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <header>Header</header>
      <main>{children}</main>
      <footer>Footer</footer>
    </>
  );
}

export function Layout({ children }: { children: React.ReactNode }) {
  const MainLayout =
    useMatches().find((m) => m?.handle?.Layout)?.handle?.Layout ??
    DefaultLayout;

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <MainLayout>{children}</MainLayout>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

// routes/test.tsx
export const handle = {
  Layout: ({ children }: { children: React.ReactNode }) => (
    <div>
      <h1>Custom Layout</h1>
      {children}
    </div>
  ),
};

https://stackblitz.com/edit/remix-run-remix-tmvral?file=app%2Froot.tsx

hot agate May 22, 2024, 4:02 PM

#

That is actually pretty neat, thank you! Awesome

#Using routes/_index.tsx as the layout for child routes