🗒 Cheat Sheet← Lesson
BitWithBite
React Worksheet

🖼️ Nested Routes & Layouts

Chapter: React Router & Navigation · Level ★★☆ · Time: 20 min
SCORE___ / 20
NameClassDate
After this worksheet you can
Use Outlet in a layoutNest child routesUse the index routeAvoid repeating layout code
📚 Quick Recap

🎯 What you'll practice: Shared layouts via Outlet and nested Route definitions.

🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4

1Outlet is used inside a:
2The index route renders when:
3Nested routes avoid:
4A DashboardLayout typically contains:

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

5The component that renders the active child route inside a layout is .
6A child route without its own "path" attribute but marked matches the parent exactly.
7Write a DashboardLayout component using Sidebar and Outlet.
8Write nested Route definitions for "/dashboard" with an index Home and a "courses" child.
9Why does the Sidebar only render once even as the user navigates between dashboard sub-pages?

🚀 Section C · Challenge ● CHALLENGE 5

10Design a nested route structure for "/settings" with an index Overview page, a "profile" child, and a "security" child, sharing a SettingsLayout.
💭 Reflection — the most useful thing I learned:
A ___/4   B ___/11   C ___/5   Total ___/20 Teacher's Signature Parent's Signature
✂ answer key — fold or cut before handing out

1-B   2-A   3-A   4-A  |  5 = Outlet   6 = index   7 = function DashboardLayout(){return <div><Sidebar/><main><Outlet/></main></div>;}   8 = <Route path="/dashboard" element={<DashboardLayout/>}><Route index element={<Home/>}/><Route path="courses" element={<MyCourses/>}/></Route>   9 = Because DashboardLayout itself only re-renders when the layout's own props/state change — the Outlet is what swaps out, so the Sidebar component instance persists across navigation between child routes  |  10 = <Route path="/settings" element={<SettingsLayout/>}><Route index element={<Overview/>}/><Route path="profile" element={<Profile/>}/><Route path="security" element={<Security/>}/></Route>

📄 Need offline practice?Print this worksheet or open the one-page cheat sheet.
🗒 Cheat Sheet