Route Params
Loading "Adding Dynamic Parameter Support"
Run locally for transcripts
👨💼 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 Example | Params | Example 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: