What does the react-router-dom library do?

ReactJunior~2 min read

What the `react-router` library does

react-router is a library that lets you implement navigation (routing) inside a SPA (Single Page Application) built with React.

It is responsible for:

watching for changes to the URL in the address bar;
matching the URL to the right component;
updating the interface without reloading the page;
providing tools for navigation, parameters, nested routes, and so on.

In simpler terms:

react-router makes it so that, depending on the URL (for example, /, /about, /profile/42), React shows the right component on the page - without a reload.

The main components and concepts of `react-router`

1. `<BrowserRouter>`

Wraps the whole application and "listens" for changes to the address in the browser. It uses the HTML5 History API (pushState, replaceState) to manage the URL.

javascript

import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <MyRoutes />
    </BrowserRouter>
  );
}

2. `<Routes>` and `<Route>`

Describe the structure of routes (what to display for which path).

javascript

import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function MyRoutes() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

When you go to /about, React will show the <About /> component.

Via the `<Link>` component:

javascript

<Link to="/about">About us</Link>

→ Changes the URL and updates the component without reloading the page.

Programmatically via `useNavigate()`:

javascript

const navigate = useNavigate();
navigate("/profile");

4. Route parameters (`useParams`)

Let you create dynamic routes, for example /users/:id.

javascript

<Route path="/users/:id" element={<User />} />

javascript

import { useParams } from "react-router-dom";

function User() {
  const { id } = useParams();
  return <h2>User profile #{id}</h2>;
}

5. Query parameters (`useSearchParams`)

Working with parameters in the URL, for example ?page=2.

javascript

const [searchParams, setSearchParams] = useSearchParams();
const page = searchParams.get("page");

6. Nested routes

Let you build routes that share a common wrapper (layout):

javascript

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route path="analytics" element={<Analytics />} />
  <Route path="settings" element={<Settings />} />
</Route>

7. Route guards and Redirect

You can redirect a user who is not authenticated:

javascript

import { Navigate } from "react-router-dom";

<Route
  path="/profile"
  element={isAuth ? <Profile /> : <Navigate to="/login" />}
/>

The main features of `react-router`

Feature	Description
SPA navigation	Switching pages without a reload
Nested routes	Support for layouts and subpages
Dynamic parameters	`/users/:id`, `/posts/:slug`
Navigation from code	`useNavigate()`
Query parameters	`useSearchParams()`
Handling 404	`<Route path="*">`
Protected routes	Redirects based on state (authentication)

Package variants

Package	Where it is used
`react-router-dom`	In web applications (browser)
`react-router-native`	In React Native
`react-router`	The base package, shared across all platforms

You usually install:

javascript

npm install react-router-dom

In a nutshell:

react-router is a router for React that lets you manage the URL and which components are displayed, creating a full multi-page SPA with fast navigation and a flexible route structure.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.