React Router

When building web applications using React, developers often face a challenge: how to navigate between different pages or views in a single-page application (SPA) without reloading the page. That’s where React Router comes in!

Introduction

React Router is a standard routing library for React. It allows you to define navigation paths (routes) in your React application and map them to different components. This makes it easy to build multi-page experiences in a single-page app (SPA).

Think of it like setting up different pages (Home, About, Contact, etc.) in your app — without the browser refreshing when you move between them.

Why Use React Router?

Here’s why React Router is important:

• No page reloads: Transitions between pages are smooth and fast.
• URL management: It keeps the URL in sync with the view.
• Component-based: Routes are declared using React components.
• Nested routes: You can have child routes within parent routes.
• Dynamic routing: Pages can be created dynamically based on parameters (like user profiles).

Key Concepts of React Router

1. BrowserRouter

Wraps your entire application and enables routing using the browser’s history API.

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter>
  <App />
</BrowserRouter>

2. Routes and Route

These define which component should be displayed for which URL.

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

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

• path="/" means homepage.
• element={<Home />} means the Home component will be rendered.

3. Link

Used instead of <a> tag to navigate between pages without refreshing the page.

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

<Link to="/about">About</Link>

4. useNavigate

A hook used to programmatically navigate between routes.

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

const navigate = useNavigate();
navigate('/home'); // navigates to Home page

Example: Simple React Router Setup

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>

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

export default App;

Features of React Router

• Nested Routing: Routes inside routes for layouts or dashboard pages.
• URL Parameters: Pass dynamic data like user ID (/user/:id).
• Redirects: Redirect users from one route to another.
• 404 Pages: Show a “Page Not Found” component for unmatched routes.

Real-World Use Cases

• Navigation between product pages in an e-commerce app.
• Handling user profiles by ID.
• Creating admin dashboards with nested menus.
• Displaying different layouts for authenticated vs. unauthenticated users.

Summary

Conclusion

React Router is essential for building dynamic, multi-view applications in React. It helps developers handle navigation, routing, and URLs seamlessly inside SPAs. Whether you’re building a personal portfolio or a large-scale web app, React Router makes navigation smooth, user-friendly, and easy to manage.