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: