Scroll Restoration & Not-Found Routes
Restore scroll when navigating back and show a friendly 404 for unknown routes; keep UX smooth on mobile.
Scroll Restoration & Not-Found Routes is a free React Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why restore & 404?
Goal: Keep navigation natural.
- Scroll restore when going back
- 404 page for unknown routes
- Simple, lib-free demo
Concepts at a glance
- Save scrollTop per route before leaving
- On mount, read previous and scrollTo
- Catch unmatched paths and show a clear not-found screen
Demo: tiny router shell
A tiny router state plus three routes; we'll add scroll restore next.
<div id="root"></div>Demo: scroll restoration
Save scrollTop per route; restore on next mount for a natural back experience.
<div id="root"></div>Demo: not-found route
Add a NotFound screen for unknown paths; offer a button to go Home.
<div id="root"></div>Tips & pitfalls
- Store scroll per route key
- Restore on mount before heavy work
- Always include a NotFound screen with a clear way back
Scroll restore check
Recap
Recap: Cache scrollTop by route and restore it to make back navigation feel native. Add a friendly 404 that guides users back to safety.
Frequently asked questions
Is the “Scroll Restoration & Not-Found Routes” lesson free?
Yes — the full text of “Scroll Restoration & Not-Found Routes” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Scroll Restoration & Not-Found Routes”?
Restore scroll when navigating back and show a friendly 404 for unknown routes; keep UX smooth on mobile. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Scroll Restoration & Not-Found Routes” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Nested Layouts, Loaders (Concept), Prefetching
- Auth Flows & Protected Routes
- Scroll Restoration & Not-Found Routes