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.
How does the <Outlet /> in root.tsx know to load route __app.tsx rather than looking for index.tsx?
I answer my own question: root.jsx finds index.jsx inside the pathless __app directory.
There is a LOT going on in this 9 minutes! No wasted time at egghead.
You got it!