Routes
Loading "Routing in Remix"
Run locally for transcripts
Because routing involves creating files, you're going to need to follow the
instructions in this document. There aren't any files for Kody to give you
instructions in like usual.
👨💼 We got our first user! His name is "Kody" 🐨 so we're going to build Kody's
user profile page and his notes pages (his username is "kody"). Users in this
app have profile pages and can make notes. So, we want to have the following
routes:
/users/kody- Kody's profile page/users/kody/notes- Kody's list of notes/users/kody/notes/some-note-id- A specific note
These pages will get more interesting in the future, but for now, let's just
focus on the routing portion. Your job is to create four route files.
From a layout perspective, we want the profile page to take up the full screen.
The notes page should also take up the full screen, but the specific note should
be nested inside the notes page.
It could be useful to run the solution app and see what the final result looks
like by clicking on the "Solution" tab and running that app.
It's not very important that you memorize the route convention. This is
something you will become familiar with over time and you can always refer
back to the
remix-flat-routes
documentation any time you need a refresher.Let's start with the profile page. Following the route convention, we have a
choice of where we can place the file. We can either put it in
routes/users.kody.tsx or routes/users+/kody.tsx.Let's talk about what these special characters mean for
remix-flat-routes.
The . in users.kody tells remix-flat-routes to separate the users and
kody by a /. So users.kody becomes users/kody. The + in
users+/kody does the same thing, except it allows you to use a folder
instead of an extra-long filename. That's the only difference. In this
exercise we're going to go with the +/ here, but we'll use the . in
another route.In this case, because we know we're going to have several routes under the
/users path, I think it makes the most sense to use the users+/ directory
approach.🐨 In this file, create a component and export it as the default export. You can
start that component out by returning a
<div> with a title like this:export default function KodyProfileRoute() {
return (
<div className="container mb-48 mt-36 border-4 border-green-500">
<h1 className="text-h1">Kody</h1>
</div>
)
}
🐨 I'm adding some borders to make it easier for you to notice the
relationships between the routes.
🐨 Once you've got that, open .
"Kody" should be displayed on the page. One fun fact, you'll also notice the
Epic Notes logo in the header and the footer are on the page as well, even
though you didn't render those yourself. That's because you're actually
already using nested routing! The route you just created is nested
inside !
Now, let's create the notes parent route. All the notes will be "URL Nested"
inside
/users/kody, but they won't be "Layout Nested," so we'll need to add an
underscore (_) to the filename. Also, since we'll have several of these, we'll
use the + convention to allow us to put them all in a folder instead of having
to have a really long filename.So let's create the file for the
/users/kody/notes route.Inside of this one, let's start with:
export default function NotesRoute() {
return (
<div className="flex h-full justify-between pb-12 border-8 border-blue-500">
<h1 className="text-h1">Notes</h1>
</div>
)
}
🐨 Now you can go to .
The
<h1> of "Notes" should be displayed on the page, but the "Kody" from the
previous route should not be displayed. That's because we're not using layout
nesting here thanks to the _ in the filename.Great, now let's create the route for a specific note. This one will be nested
inside the notes route. For this, I don't think it's very useful to have another
folder of nesting, so instead of the
+/ syntax for a directory, we'll just add
notes. to the filename.Inside of this one, let's go with:
export default function SomeNoteId() {
return (
<div className="container pt-12 border-8 border-red-500">
<h2 className="text-h2">Some Note</h2>
</div>
)
}
Super, now let's go to .
Uh oh! We still just have "Notes" on the screen!? But the URL has our
/some-note-id in it.If you like, you can cd into
playground and run npx remix routes. If you do
that, it'll print this:<Routes>
<Route file="root.tsx">
<Route index file="routes/index.tsx" />
<Route path="users/kody" file="routes/users+/kody.tsx" />
<Route path="users/kody/notes" file="routes/users+/kody_+/notes.tsx">
<Route
path="some-note-id"
file="routes/users+/kody_+/notes.some-note-id.tsx"
/>
</Route>
</Route>
</Routes>
So the routes are definitely right there. What's going on? Well, remember that
we're nesting our routes. And we wouldn't want Remix to just stick the UI for
each nested route one below the other. As the developer, we want to control
where the nesting actually happens. The parent contains the child which contains
the grandchild etc. So what we need is to have the parent (
/users/kody/notes)
to tell Remix where to put the child (/users/kody/notes/some-note-id). And we
do this using the <Outlet /> component.Here's a quick example of how this works:
export default function Parent() {
return (
<div>
<h1>Parent</h1>
<Outlet />
</div>
)
}
export default function Child() {
return <h2>Child</h2>
}
With that, when you navigate to
/parent/child, you'll see "Parent" above
"Child". If we swap the <h1> and <Outlet /> in the parent, then the child
will be above the parent. The parent gets to decide where its child goes.🐨 So go ahead and open the file and
get the
<Outlet /> component from @remix-run/react, then render it below the
<h1> we put in there earlier.Great! Now when we're on ,
it shows the "Notes" title and the "Some Note" text! 🎉
Another thing that will be really useful for us is to have some default content
that shows up on the
/users/kody/notes page when we're not on a specific note.
Something like "please select a note" or something. We can do that by adding an
index route to the notes route. We'll create that right next to our
some-note-id route.Stick this in there:
export default function NotesIndexRoute() {
return (
<div className="container pt-12 border-8 border-purple-500">
<p className="text-body-md">Select a note</p>
</div>
)
}
Now if we navigate to , we'll see the
"Select a note" text.
Sweet! You've got nested routing working. 🎉