React Router

React Router is a standard library used in React applications to handle navigation between different pages or views without reloading the entire page.

It enables single-page applications (SPAs) to behave like multi-page websites by dynamically rendering components based on the URL.

What is React Router?

React Router is a routing library that allows you to define multiple routes in your React application.

Each route maps a URL path to a specific component, enabling smooth navigation.

Why Use React Router?

Without React Router, navigation in React would require full page reloads, which reduces performance and user experience.

React Router provides fast, client-side routing for seamless transitions between pages.

Installing React Router

To use React Router, you need to install the react-router-dom package.

npm install react-router-dom

Basic Setup

You wrap your application with BrowserRouter to enable routing functionality.

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

function App() {
  return (
    <BrowserRouter>
      <Routes />
    </BrowserRouter>
  );
}

Defining Routes

Routes are defined using the Routes and Route components from React Router.

Each Route maps a path to a specific component.

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

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

Linking Between Pages

Instead of anchor tags, React Router uses the Link component for navigation.

This prevents full page reloads and keeps the app fast.

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

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

Dynamic Routes

Dynamic routes allow you to pass parameters in the URL.

This is useful for pages like user profiles or product details.

<Route path='/user/:id' element={<User />} />

Accessing Route Parameters

You can access dynamic route parameters using the useParams hook.

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

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

  return <h1>User ID: {id}</h1>;
}

Navigation Programmatically

React Router provides the useNavigate hook to navigate programmatically.

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

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

  return (
    <button onClick={() => navigate('/about')}>Go to About</button>
  );
}

404 Page Handling

You can define a fallback route to handle unknown URLs and show a 404 page.

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

Real-World Usage

React Router is used in dashboards, e-commerce sites, blogs, and admin panels to manage navigation.

It is essential for building modern single-page applications.

Best Practices

Organize routes in a separate file for better scalability.

Use nested routes for complex layouts and avoid deeply nested routing structures.

Summary

React Router enables seamless navigation in React applications without page reloads.

Mastering routing is essential for building professional-grade React applications.