React Router connects URLs to React components so client-side navigation updates the displayed page without treating each route as a separate application. section 10.1
Build navigation incrementally:
- Declare routes with Routes and Route, including paths such as /bookings, /bookables, and /users. section 10.1
- Nest routes to organize related UI, and use a trailing wildcard when a parent route owns deeper paths. section 10.4
- Put dynamic values after a colon, read them with useParams, navigate programmatically with useNavigate, and manage query strings with useSearchParams. section 10.4
Bookable details
A route such as /bookables/:id can render BookablesView; inside that component, const {id} = useParams() retrieves the selected bookable. A list can call navigate("/url/of/page") to move elsewhere. section 10.4
Table 10.1 The four components we’ll change in this section (view table figure)
Use the component-change table to trace route setup, nested routes, parameter access, and navigation through the example application. section 10.1
