Routing & Advanced Patterns

A 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.