How to make login page not affected by nested routing

[Silvertassen]

Hello!
I'm new to Remix and struggling a bit with nested routes and Outlet. On my site I have a sidebar which I want to be present on all pages except /login. In my root.tsx I have a Layout component which contains my sidebar. The App component in root.tsx then looks like this:

export default function App() {
  return (
    <Document>
      <Layout>
        <Outlet />
      </Layout>
    </Document>
  )
}

The folder structure is simple and looks like this:

app
|-- root.tsx
|__ routes
    |-- index.tsx
    |__ login.tsx

With setup, I understand why the sidebar is present on my login page. But I don't know how to structure my files and write my code in order to have my sidebar appear on all pages except /login.
Any ideas how I can achieve this?

[sergiodxa]

What you need is to move the layout out of root to a pathless layout route, see https://remix.run/docs/en/v1/api/conventions#pathless-layout-routes.

That way routes inside the pathless layout route will have the sidebar and routes outside will not have it, the final file structure may look something like this

app
|-- root.tsx          <- here you keep only what you need on absolutely every route (e.g. html, head, body, etc.)
|__ routes
    |__ __sidebar
        |-- index.tsx <- this will render inside the Outlet of __sidebar.tsx
    |-- __sidebar.tsx <- here you render the sidebar
    |__ login.tsx     <- this will render outisde the __sidebar layout route

[Silvertassen]

Thank you very much for the answer and the documentation link. I will try this out and hopefully it works like a charm!