Create and Use a Layout with Remix Pathless Layout Routes

To further prep for implementing user sign up and log in, you will create a sign up and log in page. To do this, there are a few development workflows that you’ll be introduced to. You will create a reusable button component from the previous button that was created to use inside the Nav header.

To actually reuse the buttons, you’ll need to create a nav. One thing that you shouldn’t do is apply a nav to every page you create. This is why Remix has layout routes and in this case because it’s an application layout, you will want a pathless — pathless meaning it won’t show up in the url — layout route. This is denoted with two underscores in the layout file, for an app that is __app.

Along the way you will be introduced to an awesome component pattern that implements an as prop. What this will do is let you define your button AS a link so that you can use actual HTML links instead of buttons for accessibility reasons.