React Router basics: map URLs to components without full reloads

Modern React apps usually expose several screens, yet visitors still expect instant transitions. React Router maps URL paths to components so the browser can swap views without a full document reload.

What Is React Router?

React Router is the standard routing library for React. You declare paths and the library renders the matching component when the location changes.

Typical mappings look like:

• / → Home page
• /about → About page
• /contact → Contact page

That model fits single-page applications, where the shell stays mounted and only the routed content updates.

Why Do We Need React Router?

Without a router, juggling multiple views tends to sprawl into ad-hoc conditionals. A routing library ties locations to components and keeps navigation consistent.

Practical benefits include:

• Client-side navigation: Change views without reloading the document.
• URL-based rendering: Decide what to show from the current path.
• Reusable routing structure: Keep path definitions in one place.
• Nested routes: Model sections and nested screens.
• Navigation links: Offer a shared way to move between pages.

Installing React Router

For browser React apps, install the DOM package:

npm install react-router-dom

That package exports the components and hooks used for browser history routing.

Creating a Simple React Router Example

Build a tiny app with Home, About, and Contact screens.

1. Create the Home Component

function Home() {
  return <h1>Home Page</h1>;
}

export default Home;

2. Create the About Component

function About() {
  return <h1>About Page</h1>;
}

export default About;

3. Create the Contact Component

function Contact() {
  return <h1>Contact Page</h1>;
}

export default Contact;

4. Configure the Routes

Wire BrowserRouter, Routes, and Route together:

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}export default App;

Visiting /about mounts About; /contact mounts Contact.

Understanding the Main Components

BrowserRouter

BrowserRouter syncs the React tree with the browser history API so the address bar and UI stay aligned.

<BrowserRouter>
  {/* Application routes */}
</BrowserRouter>

Routes

Routes holds route definitions and picks the entry that matches the current URL.

<Routes>
  <Route path="/" element={<Home />} />
</Routes>

Route

A Route binds one path to the element that should render.

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

The element prop is what appears when /about is active.

Adding Navigation with Link

Prefer Link over raw anchor reloads when moving between app routes.

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

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}export default Navigation;

Mount that nav inside the router:

function App() {
  return (
    <BrowserRouter>
      <Navigation />

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

Link updates the location so React Router can render the matching screen.

NavLink is available when the active item should look different:

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

function Navigation() {
  return (
    <nav>
      <NavLink to="/">Home</NavLink>
      <NavLink to="/about">About</NavLink>
      <NavLink to="/contact">Contact</NavLink>
    </nav>
  );
}

Use NavLink when the menu needs a visual cue for the current page.

Nested Routing

Nested routes express child screens under a parent section, for example:

• /dashboard
• /dashboard/profile
• /dashboard/settings

A compact sketch:

import {
  BrowserRouter,
  Routes,
  Route,
  Outlet,
} from "react-router-dom";

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}function Profile() {
  return <h2>Profile Page</h2>;
}function Settings() {
  return <h2>Settings Page</h2>;
}function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}export default App;

Outlet marks where the matched child route should render inside the parent layout.

Handling Unknown Routes

Provide a fallback component for unmatched paths:

function NotFound() {
  return <h1>404 - Page Not Found</h1>;
}

Register it last with a wildcard:

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

The * pattern catches locations that none of the earlier routes matched.

Conclusion

React Router connects URLs to components, enables in-app navigation, supports nested layouts, and covers missing pages with a fallback. Learning those primitives is a practical step toward dashboards, blogs, portfolios, and storefronts built as React SPAs.