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:

Please set the playground first

Loading "Route Params"
Loading "Route Params"

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.