BitWithBite
Full-Stack · Quick Reference
Lesson 22 — React Router Cheat Sheet
In one line: React Router swaps components based on the URL without a full page reload, using BrowserRouter, Routes, and Route.
Key Ideas
1BrowserRouter. Wraps the app, enables URL routing.
2Routes / Route. Maps a path to a component.
3Link. Replaces <a>, no full reload.
4useParams. Reads dynamic URL segments.
5useNavigate. Navigates programmatically.
Setup
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/courses/:id" element={<Detail />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
const { id } = useParams();