Routing

Routing is the map from URL patterns to what renders. '/pricing' shows the pricing screen, '/blog/hello' shows one post, anything unmatched shows the 404. Two dialects dominate: file-based routing, where the folder structure is the map (Next.js, SvelteKit, Remix, Astro), and config-based routing, where you declare an array of route objects (React Router, Vue Router).

The pieces you will actually use: nested layouts that stay mounted while the child view changes (the sidebar keeps its identity and its state, its scroll position and open sections, though it can still re-render when its own data or context changes), route params for the variable bits, query strings for filters and search, and per-route loading and error states. Treat the URL as shareable state: if someone filters a table and sends the link to a colleague, they should see the same filtered table.

Know how your router breaks ties before you go debugging one. File-based routers (Next.js, SvelteKit, Remix, Astro) and React Router's ranked matching all score a static segment above a dynamic one, so '/blog/new' beats '/blog/[slug]' without you arranging anything. Order only decides the winner in routers that walk a hand-written list top to bottom, like Express-style matchers and most homegrown configs, and there a catch-all declared too early swallows everything below it. The other common miss is hand-rolled navigation: use the framework's Link component rather than an anchor with an onClick preventDefault, or you lose prefetching, middle-click, and open-in-new-tab.