How to configure multiple layout

[XJungWon]

Hello, I'm really enjoying this great feature.

I just have one question. How can I apply a completely different layout to each page rather than a nested layout?

For example, what if I want to display a completely different layout only for the /auth path, but apply a common layout to all other pages? I tried the structure below, but (auth)._layout.tsx is still displayed as a nested layout under (app)._layout.tsx.

src/pages
  ├── (app)
  │   ├── _layout.tsx
  │   └── index.tsx
  └── (auth)
      └── login
          ├── _layout.tsx
          └── index.tsx

A typical website has different layouts for the login page and main page, right? I want to implement this, but I don't know how. Is there anyone who can help?

[oedotme]

Hey @XJungWon, defining multiple layouts is supported and in indeed is a common use case.

Could you please provide a Stackblitz example (based on the repo examples) with the changes you mentioned in your comment?

You can use this if you use React Router https://github.com/oedotme/generouted/tree/main/examples/react-router

[tung-dnt]

@oedotme I'm having the same problem with pathless layout group as well. Everything just fine except (errors) and (auth) routes. They always throw 404 page. Here's my folder structure.

[oedotme]

I just want to confirm that I haven't faced any issues with the regular layouts or pathless groups layouts.

@tung-dnt Can you please also apply the structure you're having a problem with to this example and share it here?

https://stackblitz.com/github.com/oedotme/generouted/tree/main/examples/react-router

[tung-dnt]

@oedotme my bad, I have tried with /auth/forgot-password instead of /forgot-password, that's why it throw 404 error