📖 Notes
LESSON 12 OF 18
React Router v6 — Setup & Routes
URLs That Map to Components
React Router reads the current URL and renders the matching component — turning a single-page app into something that behaves like a real multi-page site.
Core Building Blocks
Setup, Dynamic Segments, Navigation
🌐
BrowserRouter
Wraps the app; Routes contains all Route definitions.
🔗
Dynamic Segments
<Route path="/courses/:slug" />; useParams() reads { slug } inside.
🧭
Navigation
<Link to="/courses"> — no full reload. useNavigate() — programmatic.
🚧
Catch-All
<Route path="*" /> — always listed last.
Full Router Setup
JSXimport { BrowserRouter, Routes, Route, Link, useNavigate, useParams } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/courses" element={<Courses />} />
<Route path="/courses/:slug" element={<CourseDetail />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}
function CourseDetail() {
const { slug } = useParams();
return <h1>Course: {slug}</h1>;
}