React Router Basics: BrowserRouter, Routes, Route and Link Explained

Most React apps soon need several screens, such as Home, About, Products and Contact. React itself has no notion of URLs, so mapping addresses to screens is left to a library, usually React Router. Four of its components cover most everyday routing: <BrowserRouter>, <Routes>, <Route> and <Link>. Once you know what each one does and how they nest, you can wire up a multi-page single-page app and explain it in an interview.

BrowserRouter connects React to the URL

<BrowserRouter> is the router itself. It enables client-side routing through the browser's History API, keeping the rendered UI in sync with the address bar without asking the server for a new document.

Use it when your app should expose distinct URLs for its screens while still behaving as one page, for example:

/
/about
/products
/contact

Setup means wrapping your component tree; anything that needs routing must live inside it:

import { BrowserRouter } from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      {/* Application routes */}
    </BrowserRouter>
  );
}

You normally place it once, at the root. One practical consequence: because paths like /about are real URLs, your host must serve the same index.html for all of them, or a refresh on /about returns a server 404.

Routes picks what to render

<Routes> is the container for your route definitions. On every location change it compares the current URL with its children and renders the matching one. Use it whenever React Router, not hand-written conditionals, should decide which screen appears:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/products" element={<Products />} />
</Routes>

Here one <Routes> element handles all three paths. It selects the best match rather than the first one listed, so you rarely need to worry about ordering.

Route maps one path to one element

Each <Route> pairs a URL path with the component to show, like an entry in a lookup table:

/about → About component
/products → Products component

Add one for every URL that should render something specific. The key props are path and element:

<Route
  path="/about"
  element={<About />}
/>

With that definition, a visit to this address:

/about

makes React Router render:

<About />

Note that element takes a rendered element (<About />), not a component reference, so you can pass props directly. Several routes together look like this:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/contact" element={<Contact />} />
</Routes>

If no path matches, nothing in this block renders; a catch-all path="*" route is the usual way to show a "not found" screen.

Link navigates without reloading

<Link> moves the user between routes while the app stays loaded. It renders an ordinary <a> in the DOM, but intercepts the click and lets React Router handle the navigation. Use it for internal navigation such as a nav bar:

import { Link } from "react-router-dom";
function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

Clicking About updates the URL, <Routes> re-evaluates, and the About screen appears with no browser reload, so shared layout and in-memory state survive. For external sites, a plain <a> is still correct.

Putting the four together

A minimal complete setup (with Home, About and Contact defined elsewhere):

import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

The links and the <Routes> block are siblings inside <BrowserRouter>: the navigation stays visible on every page while only the <Routes> region swaps content. The hierarchy in short:

BrowserRouter
      ↓
    Routes
      ↓
    Route
      ↓
  Component

<Link> sits beside that chain as the control users click to change the URL. The examples import from react-router-dom; recent major versions also expose these APIs from the react-router package, so check the docs for your version.

Interview questions

• What is <BrowserRouter>? The router that enables client-side routing and keeps the UI in sync with the browser URL.
• How do <Routes> and <Route> differ? <Routes> is the container that matches the URL; each <Route> defines one path and the element to render.
• How does <Link> differ from <a>? <Link> navigates on the client without a full reload; a plain <a> makes the browser load the URL again.
• Why prefer <Link> in a React Router app? It keeps the app a single-page application and avoids needless full-page reloads.
• Can <Route> work without <BrowserRouter>? Normally not: routing components must render inside a router context such as <BrowserRouter>.

Key takeaways

• <BrowserRouter> enables routing, once, at the root.
• <Routes> manages routes and renders the match.
• <Route> maps a URL to a component.
• <Link> moves between routes without a reload.

Nested routes, dynamic segments, protected routes and navigation hooks all build on this same model. For how React decides what to re-render when the route changes, see building a mental model for React reconciliation, state and hooks.