Reloading a deep link, with and without the fallback
Each box is one page reload. MemoryRouter with initialEntries plays the part of BrowserRouter reading the address bar. Without the fallback the server's 404 wins and React never runs. With it, the router handles both the real page and its own "not found" page, while a missing asset still gets an honest 404.
A client-side React app is a folder of static files, so any static host can serve it, as long as it answers unknown paths like /products/42 with index.html (the SPA fallback) and caches hashed assets for a year while always revalidating index.html; Vercel, Netlify and nginx in Docker each express those two rules in their own config.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the Netlify files for a Vite app with React Router: an SPA fallback and long caching for /assets/*.
Write an nginx server block for an app deployed under /shop/ (Vite base: "/shop/").
Explain it without notes
Why does reloading /products/42 give a 404 on some hosts while clicking a link to it works?
Describe the caching strategy for a Vite build and why it's safe.
Walk through a multi-stage Dockerfile for a React app served by nginx.
What happens to users with an old tab open when you deploy, and how do you handle it?
Preview
Console
Nothing logged yet.Expected console output
fallback OFF GET /products/42 -> 404
fallback ON GET /products/42 -> 200 /index.html
fallback ON GET /nope -> 200 /index.html
fallback ON GET /assets/old-chunk.js -> 404
headings: Product 42 | Page not found (from the router)