Remix pathless layout routes

Now that we know how to make shared layouts in Remix, there might be times when you want a shared layout but not the shared routes.

For instance, what happens when we want to introduce multiple auth routes that share one layout?

We might go for an auth folder and inside create files like: login.tsx and register.tsx.

That would work, right? And the answer is yes.

But the downside of that approach is that we get all the URLs prefixed with /auth:

http://mywebsite.com/auth/login http://mywebsite.com/auth/register

Remix came up with pathless layout routes for this problem.

Pathless layout routes in Remix

The main idea behind these pathless layout routes is that they can share a layout but are not read as URL segments.

To use them, you have to prefix the folder with two underscores: __auth.

And for the layout file goes the same, prefix it with __auth.tsx.

Let's try and set up these login pages to see it in action.

First, create the __auth folder inside your routes directory.

Then go ahead and create the layout file, which will hold our main auth layout. This file is called __auth.tsx and is located at the root of the routes directory.

First, remove any existing login or register routes and create login.tsx and register.tsx inside the __auth directory.

Each one can have a file similar to this:

export default function Login() {
  return <p>This is the login page</p>;
}

Note: Make sure to rename the function name and the actual copy.

If we now run the website, we can navigate to /login and /register, and our auth layout will still be there!

Auth routes

Pretty cool stuff, Remix!

You can also find the completed code on GitHub.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Remix pathless layout routes

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Pathless layout routes in Remix

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

Pathless layout routes in Remix

Thank you for reading, and let's connect!