React: What is React Router?

React Router is a library for navigation between pages in a React application without page reload (SPA).

Simple analogy: Imagine a library:

• Without React Router — every time you want a new book, you exit the library, enter again, and go to a different shelf. The page reloads.
• With React Router — you just go to a different shelf. The library does not close, the page does not reload. Only the content changes.

How it works:

1import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
2
3function App() {
4    return (
5        <BrowserRouter>
6            <nav>
7                <Link to="/">Home</Link>
8                <Link to="/about">About</Link>
9                <Link to="/users">Users</Link>
10            </nav>
11
12            <Routes>
13                <Route path="/" element={<Home />} />
14                <Route path="/about" element={<About />} />
15                <Route path="/users/:id" element={<User />} />
16            </Routes>
17        </BrowserRouter>
18    );
19}

Main components:

• BrowserRouter — wrapper that listens for URL changes.
• Routes / Route — describe URL → component mapping.
• Link — link without reload (instead of <a>).
• Outlet — place where child routes are nested.

Hooks:

• useParams() — parameters from URL (/users/5 → { id: 5 }).
• useNavigate() — programmatic navigation: navigate(/users).
• useLocation() — information about current URL.

Data Loaders (v6.4+): can load data directly in the router, before component render.