URL as state: filters in the search params
The list is derived from the URL: there is no separate color state to keep in sync. Search param values are always strings, so the size is compared as "9". Copy any of these URLs and the same list appears: that's a deep link.
Client-side routing lets a single-page app change the URL and the screen without asking the server for a new HTML page, using the browser's History API; the URL becomes part of your app's state, so pages can be bookmarked, shared and reloaded.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a replace(path) method to the tiny router and use it for a "Go to login" button so that Back doesn't return to the page you replaced.
In the filters example, add a sort param with two buttons ("Name" and "Size") and sort the list from the URL.
Write the nginx and Vercel rules you would add to deploy an SPA whose routes include /dashboard/settings.
Explain it without notes
What is the difference between a multi-page app and a single-page app, from the user's and the browser's point of view?
Explain how pushState, replaceState and popstate work together in client-side routing.
Why do SPAs need a server fallback, and why does the bug usually appear only after deploying?
What does "URLs are state" mean, and how do you decide what goes in the URL?
Preview
Console
Nothing logged yet.Expected console output
/shoes?color=red -> Runner, Climber
/shoes -> Runner, Walker, Climber
/shoes?size=9 -> Walker, Climber
/shoes?size=9&color=blue -> Walker