Stage 2 · Lesson 8 of 8
Client side routing
A has one HTML page. A such as picks which component to show for the current URL, without reloading the page. Define routes like /projects and /projects/:id, where :id is a placeholder.
Read that value with useParams. Move between pages with the Link component, not a plain <a> tag, so the app does not reload. Nested routes with an outlet give shared layouts, such as a sidebar that stays in place while the main area changes.
Keep state that belongs in the address, like the current filter or page number, in the . Then users can share the link and refresh without losing it.
Common trapthat in , refreshing /projects/42 asks the server for that exact path. The host must send back index.html for unknown paths, or users see a 404.
A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- GuideFreeReact Documentation
Meta
Free official course; Thinking in React and Managing State matter most
- CourseFreeFull Stack Open
University of Helsinki · Intermediate
Free: Parts 0 to 2 cover web basics, React and talking to a server