React Router

Most modern websites contain multiple pages, such as a Home page, About page, Contact page, Blog, or Products page. In traditional websites, opening a new page usually reloads the entire webpage.

React applications work differently. Since React is commonly used to build Single Page Applications, it updates only the content that changes instead of reloading the whole page. This makes navigation much faster and provides a smoother user experience.

To handle navigation between different pages in a React application, developers use React Router.

What is React Router?

React Router is a library that allows you to create navigation between different pages or views in a React application.

It maps different URLs to different React components.

For example:

• / -> Home Page
• /about -> About Page
• /contact -> Contact Page

Instead of loading a completely new webpage, React Router updates only the part of the page that needs to change.

Why Do We Need React Router?

Imagine building an online shopping website.

It may have pages like:

• Home
• Products
• Product Details
• Cart
• Checkout
• Contact

Without React Router, managing navigation between these pages would be difficult.

React Router helps by:

• Managing page navigation
• Updating the URL
• Displaying the correct component
• Creating a smooth user experience

Installing React Router

Before using React Router, install it in your React project.

npm install react-router-dom

This package provides all the components needed for routing.

Basic Routing Example

A simple React Router setup looks like this:

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

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

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

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

Explanation

• BrowserRouter enables routing.
• Routes groups all the routes.
• Route connects a URL to a React component.
• When the URL changes, React displays the matching component.

Navigating Between Pages

Instead of using normal HTML a tags, React Router provides the Link component.

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

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

Why Use Link?

A normal a tag reloads the entire webpage. The Link component changes the page without refreshing the browser, making navigation much faster.

Creating Multiple Pages

As your application grows, each page is usually stored in its own component.

src/
|
├── pages/
|   ├── Home.jsx
|   ├── About.jsx
|   ├── Contact.jsx
|   └── Products.jsx
|
├── App.jsx
└── main.jsx

This keeps your project organized and easier to maintain.

Dynamic Routes

Sometimes a page needs to display different information based on the URL.

For example:

/product/1
/product/2
/product/3

Instead of creating separate pages for every product, React Router supports dynamic routes.

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

The :id part is called a route parameter, and it changes depending on the URL.

Accessing Route Parameters

React Router provides the useParams Hook to access route parameters.

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

function Product() {
  const { id } = useParams();

  return <h2>Product ID: {id}</h2>;
}

If the URL is:

/product/5

The output will be:

Product ID: 5

This is useful for product pages, blog posts, and user profiles.

Handling Missing Pages

Sometimes users enter an incorrect URL. React Router allows you to create a 404 Not Found page.

<Route path="*" element={<NotFound />} />

If no route matches the URL, React displays the NotFound component. This improves the user experience by showing a helpful message instead of a blank screen.

Real-World Example

Imagine you are building an online shopping website.

When users click different menu items:

• Home displays featured products.
• Products shows all products.
• Cart displays selected items.
• Contact shows a contact form.

React Router changes the displayed page instantly without refreshing the browser. This creates a fast and smooth shopping experience.

Best Practices

When using React Router:

• Keep each page in a separate component.
• Use meaningful route names.
• Use the Link component instead of HTML a tags.
• Create a 404 page for invalid URLs.
• Organize routes clearly as your application grows.
• Use dynamic routes for similar pages like products or blog posts.

These practices help keep your project clean and easy to maintain.

Summary

React Router is an essential library for creating navigation in React applications. It allows users to move between different pages without reloading the entire website, resulting in faster and smoother experiences.

By using components such as BrowserRouter, Routes, Route, and Link, developers can organize applications into multiple pages while maintaining the performance of a Single Page Application. Learning React Router is an important step toward building professional and user-friendly React projects.

Key Takeaways

• React Router is used to add navigation to React applications.
• It helps build Single Page Applications with smooth page transitions.
• BrowserRouter enables routing in the application.
• Routes groups multiple routes together.
• Route connects a URL path to a React component.
• Link provides navigation without reloading the page.
• Dynamic routes allow one component to display different data based on the URL.
• A 404 page improves the user experience when an invalid URL is entered.