Remix.run Create a shared App Header but exclude it on some routes

Question

How do I create a shared Header or any component on which routes I want in Remix but for example don't show it if the route is on /register or /login

But the rest of the routes don't share the same layout. For example there could be /documents and /panel. Do I have to manually include them in every route component ? Or I know that you can create for example a shared layout for all of these like:

_index.tsx
_index.documents.tsx
_index.panel.tsx

I have experience in react but I'm new to Remix, I just want to figure out what's the best and the "remix way" to do it

Answer 1

Remix has layout routes that allow you to compose shared components like headers and nav bars. Typically this is done via URL segments, but you can also have pathless layouts. In v2 route convention, these start with _.

So you could have:

_public.tsx      <- layout    
_public.login.tsx
_public.register.tsx

_app.tsx         <- layout      
_app._index.tsx
_app.documents.tsx
_app.panel.tsx

Layout routes are simply default exports that include an <Outlet />. This is like the children prop of a React component and is where Remix will render the child routes.

// _public.tsx
export default function Layout() {
  return <div><Outlet /></div>
}

// _app.tsx
export default function Layout() {
  return (
    <div>
      <Header />
      <Outlet />
    </div>
  )
}