Route parameters
🏠The everyday picture
A hotel's room numbers: one design for every room's door sign, with the number filled in. /rooms/204 and
/rooms/305 use the same layout with different details.
📘What it really is
- A parameter is a variable part of a path, marked with
::
<Route path="/enquiries/:id" element={<EnquiryDetail />} />
- Read it inside the component:
const { id } = useParams();
const enquiry = enquiries.find(e => e.id === id);
if (!enquiry) return <NotFound />;
-
Always handle a parameter that matches nothing: people type addresses, follow old links, or change numbers by hand.
-
Search parameters (after
?) hold optional settings like filters, so a filtered view can be bookmarked and shared:
const [searchParams, setSearchParams] = useSearchParams();
const status = searchParams.get("status") ?? "all";
setSearchParams({ status: "new" });
The address becomes /?status=new.
- Treat parameters as untrusted text: validate before use, never insert into HTML unescaped.
🖱️Try it
Add an EnquiryDetail page at /enquiries/:id showing the full enquiry, with buttons to change its status. Make
each card's name a Link to it. Then move your status filter into the address with useSearchParams, and check that
reloading keeps the filter.
✅Quick check
What should /enquiries/XYZ show when there's no enquiry XYZ?
Show the answer
A clear "not found" message with a link back, never a crash or blank page.
Why put a filter in the address as ?status=new?
Show the answer
The filtered view can be bookmarked, shared and survives a reload.