Trying to have common footers/headers in folder structure

[Viewport-dev]

I am new to Remix, and trying to have some basic pages like the home page, contact page, about us etc. That should all have a common header and footer. Then the /login and /register routes should have a different layout and then finally the dashboard section should have a different layout. There seems to be many ways to structure the project but one of the options looks like folders which makes the most sense to me, especially if there will be a lot of routes. But I don't understand how to provide common layouts to different parts of the site.

So basically in the routes folder I have

_index.tsx
about-us.tsx
contact-us.tsx

In the root.tsx I put a common footer component but that is showing up in my login pages as well.

In the /login folder I have

route.tsx

How can I have a different footer and header/nav in each case?

[kiliman]

You want to use pathless layouts. This lets you customize the layout for all its child routes.

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

app/routes
├── _account.tsx            <- layout 
├── _account.login.tsx      /login
├── _account.register.tsx   /register
⏐
├── _default.tsx            <-- layout
├── _default._index.tsx     /
├── _default.about-us.tsx   /about-us
├── _default.contact-us.tsx /contact-us
⏐
├── dashboard.tsx           <-- layout
└── dashboard._index.tsx    /dashboard