Welcome to the EpicWeb.dev Workshop app!

This is the deployed version. Run locally for full experience.

Routes

Loading "Routing in Remix"
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:
  1. /users/kody - Kody's profile page
  2. /users/kody/notes - Kody's list of notes
  3. /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. πŸŽ‰