How to Use React Router

Use React Router when your app needs multiple pages, URLs, and navigation without full page reloads. It is the standard way to build dashboards, settings pages, product flows, and learning paths inside React apps.

What you’ll build or solve

You’ll learn how to use React Router for page routes, links, and route-based layouts. You’ll also know how nested routes keep larger apps organized.

When this approach works best

This approach is the right choice when different UI screens should map to unique URLs.

Common real-world scenarios include:

• Dashboard navigation
• Profile pages
• Product checkout flows
• Admin settings
• Documentation apps

This is a bad idea when the app is a single isolated widget with no route changes.

Prerequisites

You only need:

• A React app
• Basic component knowledge
• The react-router-dom package installed

Step-by-step instructions

Step 1: Wrap your app with a router

Start by adding the router at the app root.

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

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

export default App;

This maps URL paths to React components.

Step 2: Add navigation links

Use Link instead of normal anchor tags.

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

function Nav() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/profile">Profile</Link>
    </nav>
  );
}

export default Nav;

This changes pages without reloading the browser.

Step 3: Use nested routes for larger layouts

Nested routes help shared layouts stay clean.

import DashboardLayout from "./DashboardLayout";
import Settings from "./Settings";
import Billing from "./Billing";

<Routes>
  <Route path="/dashboard" element={<DashboardLayout />}>
    <Route path="settings" element={<Settings />} />
    <Route path="billing" element={<Billing />} />
  </Route>
</Routes>

This keeps shared wrappers like sidebars and headers reusable.

What to look for:

• BrowserRouter enables routing
• Routes contains route definitions
• Route maps paths to components
• Link enables client-side navigation
• Nested routes keep layouts reusable

Examples you can copy

Basic two-page app

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

Product page

<Route path="/product/:id" element={<Product />} />

Dashboard nested settings

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="settings" element={<Settings />} />
</Route>

Common mistakes and how to fix them

Mistake 1: Using <a> instead of Link

What the reader might do:

<a href="/profile">Profile</a>

Why it breaks: this reloads the page and loses client-side app state.

Corrected approach:

<Link to="/profile">Profile</Link>

Mistake 2: Forgetting the router wrapper

What the reader might do:

Use Routes without BrowserRouter.

Why it breaks: route components need router context.

Corrected approach:

Wrap the app root with BrowserRouter.

Mistake 3: Wrong nested route paths

What the reader might do:

<Route path="/settings" ... />

inside a nested route tree.

Why it breaks: leading slashes can change how nesting resolves.

Corrected approach:

Use child-relative paths like "settings".

Troubleshooting

If routes do not render, confirm the app is wrapped in BrowserRouter.

If navigation reloads the page, replace <a> with Link.

If nested routes fail, remove leading slashes from child paths.

If layouts do not persist, move shared wrappers into parent routes.

Quick recap

• Wrap the app with BrowserRouter
• Use Routes and Route for page mapping
• Use Link for navigation
• Use nested routes for shared layouts
• Prefer route-relative child paths