React Routing (Navigation Between Pages)

Introduction

So far, you have built components that render different UI parts inside a single page. However, real-world applications have multiple pages, such as Home, About, Contact, Dashboard, and more. To move between these views without reloading the browser, React uses routing.

Routing allows users to navigate between different components while keeping the application fast and seamless. In React applications, routing is commonly handled using the React Router library.

What Is React Router?

React Router is a library that enables navigation in React applications. Instead of loading a new HTML page from the server, React Router updates the UI by switching components based on the URL.

This creates a Single Page Application (SPA) experience with fast, smooth page transitions.

Installing React Router

To use routing, install React Router in your project.

npm install react-router-dom

After installation, you can import routing components into your app.

Basic Router Setup

The BrowserRouter component wraps your entire application to enable routing.

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

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

Each Route defines a URL path and the component that should render.

Creating Navigation Links

To navigate without reloading the page, use the Link component instead of the traditional tag.

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

Clicking a Link updates the URL and displays the related component instantly.

Route Parameters

Sometimes, you need dynamic routes, such as viewing a specific user or product.

<Route path="/user/:id" element={<UserProfile />} />

To access the parameter inside the component:

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

function UserProfile() {
  const { id } = useParams();
  return <h2>User ID: {id}</h2>;
}

The URL value is captured and used inside the component.

Nested Routes

React Router allows routes inside other routes.

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

Nested routes help organize complex layouts.

Programmatic Navigation

You can navigate using code with the useNavigate hook.

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

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

  function handleLogin() {
    navigate("/dashboard");
  }

  return <button onClick={handleLogin}>Login</button>;
}

This is useful after form submissions or authentication.

Common Mistakes to Avoid

• Using instead of

• Forgetting to wrap the app with BrowserRouter

• Incorrect route paths

• Not handling dynamic parameters properly

Summary

In this chapter, you learned how routing enables navigation between different views in a React application. You set up routes, created navigation links, worked with route parameters, used nested routes, and handled programmatic navigation. Routing transforms your app from a single screen into a multi-page experience without page reloads.