Guided Notes
Routing & Advanced Patterns
React Router, portals, Suspense and lazy loading, forwardRef, higher-order components, and transitions.
Routing with React Router
Slide 1 / 5A single-page app still needs URLs: /, /about, /products/42. React Router maps paths to components without reloading the page:
npm i react-router-dom
<BrowserRouter> <nav> <Link to="/">Home</Link> <Link to="/about">About</Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="*" element={<NotFound />} /> </Routes> </BrowserRouter>
Link changes the URL and the view, but not the page. Frameworks such as Next.js use file-based routing instead.
