The archive as a lazily loaded route
React Router wraps navigations in a transition, so while the chunk downloads the board stays on screen instead of flashing the fallback. The fallback appears only when the archive is the first screen: try <MemoryRouter initialEntries={["/archive"]}>. The second visit is instant: lazy caches the loaded module.
Milestone 6: protect the app with an error boundary and error reporting, split the archive into its own lazily loaded chunk, build it with Vite, deploy it with an SPA fallback, write a README, and plan what to add next.
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.
Make the error boundary's Try again button reset the board to the saved tasks.
Write the nginx location blocks for the task board: hashed assets cached for a year, everything else falling back to index.html.
Explain it without notes
What would you check before shipping a React app?
Why does a client-side routed app need an SPA fallback, and how do you configure one?
How do error boundaries and the root error callbacks work together?
Which parts of the task board would you code-split, and why?
Preview
Console
Nothing logged yet.Expected console output
first screen: Board
while downloading: Board
archive chunk downloaded
then: Archive: 5,000 tasks
second visit, no download: Archive: 5,000 tasks