React Routing

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 lets you 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 lets you 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.

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.