Route Params

๐Ÿ‘จโ€๐Ÿ’ผ It wouldn't make much sense if we needed to make a new route for every single user. Instead, we can use a route parameter to capture the username and use it in our route handler. We typically call these "params".
With the file-based route convention we're using, we define params by using a $-prefixed filename segment. For example:
Route File ExampleParamsExample Path
app/routes/ships.$shipId.tsx$shipId/ships/1234
app/routes/bookings+/$bookingId.tsx$bookingId/bookings/1234
app/routes/chats+/$chatId.messages.tsx$chatId/chats/1234/messages
๐Ÿจ So in this exercise, let's rename our files and folders from using kody to use the $username and from some-note-id to $noteId params and instead of rendering "Kody" we can render the username from params as well as the noteId.
๐Ÿ’ฐ You can get the param value from useParams() which you can import from @remix-run/react. For example:
import { useParams } from '@remix-run/react'

export default function PetRoute() {
	const params = useParams()
	return <h1>Hello {params.petName}</h1>
}
Once you've finished with that, you should be able to go to any username and it will display that username. Here are some to try:
And then for the note:

Access Denied

You must login or register for the workshop to view and run the tests.

Check out this video to see how the test tab works.