BitWithBite
React Worksheet
🗺️ React Router — Setup & Routes
SCORE___ / 20
NameClassDate
After this worksheet you can
Set up BrowserRouter and RoutesUse Link for navigationRead URL paramsAdd a catch-all 404 route📚 Quick Recap
🎯 What you'll practice: Client-side routing with React Router v6.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Navigation without a full reload uses:
2useParams() reads:
3The catch-all route uses path=:
4useNavigate() is used for:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5The component wrapping the whole app to enable routing is .
6The catch-all route must be placed in the Routes list.
7Write a Route for "/courses/:slug" rendering CourseDetail.
8Inside CourseDetail, write the line that reads the slug from the URL.
9Why must the catch-all route always come last in the Routes list?
🚀 Section C · Challenge ● CHALLENGE 5
10Design routes for a course platform: home "/", course list "/courses", course detail "/courses/:slug", and 404. Write the full Routes block.
💭 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-B 4-B | 5 = BrowserRouter 6 = last 7 = <Route path="/courses/:slug" element={<CourseDetail />} /> 8 = const { slug } = useParams(); 9 = React Router matches routes in order and stops at the first match — if "*" came first it would match every URL immediately, never letting more specific routes render | 10 = <Routes><Route path="/" element={<Home/>}/><Route path="/courses" element={<Courses/>}/><Route path="/courses/:slug" element={<CourseDetail/>}/><Route path="*" element={<NotFound/>}/></Routes>