What is routing in a React application?

ReactJunior~2 min read

Routing is a system that "maps" an address (for example, /profile or /dashboard/settings) to the component that needs to be rendered on screen.

An example without routing:

Without routing, moving to another page would require reloading the whole page from the server. With routing in React, navigation happens on the client side (client-side routing), quickly and without losing the application's state.

How it works:

React itself doesn't include a built-in router, so the React Router library is most commonly used.

An example with react-router-dom:

javascript

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Here:

<BrowserRouter> wraps the whole application and watches for URL changes.
<Routes> is a container for the list of routes.
<Route path="/about" element={<About />}/> says: if the URL is /about, show the About component.

Advantages of client-side routing:

Faster: no full page reload.
The application's state is preserved.
It's easy to manage transitions and navigation inside an SPA (Single Page Application).
It's convenient to implement dynamic routes, for example /users/:id.

Example of a dynamic route:

javascript

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

The UserPage component can get the id parameter from the URL:

javascript

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

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

Types of routing:

Type of routing	Description
Client-side routing	Managed in the browser, without a page reload. The main approach in React.
Server-side routing	Every request to a new URL triggers a reload and loads a new HTML page from the server.
Static / pre-rendered routing (Next.js)	Combines client-side and server-side rendering, enabling SEO and fast navigation.

Main hooks from `react-router-dom`:

useNavigate(): navigate between pages programmatically.
useParams(): get route parameters.
useLocation(): get the current path and query parameters.
useSearchParams(): manage query parameters (?page=2, etc.).

javascript

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

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // authorization ...
    navigate("/dashboard");
  };

  return <button onClick={handleLogin}>Log in</button>;
}

Summary:

Routing in React means controlling which components are shown depending on the URL, without reloading the page. It's implemented with libraries like react-router-dom, which makes React applications feel like full multi-page sites while keeping the convenience and speed of an SPA.

Short Answer

Interview ready

Premium

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