React Router

React Router, short for React Router Library, is a declarative routing library for React applications, allowing developers to manage navigation and render components based on URL paths. It can be installed for personal or business projects using npm or yarn from reactrouter.com/en/main. React Router supports both client-side and server-side routing, enabling single-page applications (SPAs) to provide dynamic, responsive navigation without full page reloads.

React Router provides key components such as <BrowserRouter>, <Routes>, <Route>, <Link>, and <Navigate> to define routing behavior declaratively. It integrates smoothly with React’s state and lifecycle methods, allowing route-specific rendering, nested routes, protected routes, and parameterized URLs.

React Router: Basic Routing Example

A simple React Router setup demonstrates defining routes and navigating between components.

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

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

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

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;

This example sets up a BrowserRouter with two routes: / and /about. The <Link> components allow navigation without reloading the page, demonstrating client-side routing in a single-page React application.

React Router: Nested Routes and Parameters

React Router supports nested routes and URL parameters to build complex navigation structures.

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

<Route path="/user/:id" element=<User /> />

This snippet shows a route with a dynamic parameter :id, allowing components to access URL parameters via React Router hooks like useParams(). Nested routes can also be defined to render child components within parent layouts.

React Router: Programmatic Navigation

React Router allows developers to navigate programmatically using hooks such as useNavigate.

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

function LoginButton() {
  const navigate = useNavigate();
  
  function handleLogin() {
    // Perform login logic
    navigate('/dashboard');
  }
  
  return <button onClick={handleLogin}>Login</button>;
}

In this example, useNavigate is used to redirect the user to /dashboard after a login action, enabling seamless client-side transitions without reloading the page.

React Router is widely used in modern React applications to implement SPAs, nested layouts, protected routes, and dynamic navigation based on URL state. Its declarative API aligns with React’s component-based architecture, simplifying the management of routing logic, stateful components, and URL-driven behavior. Many web applications, dashboards, and interactive platforms rely on React Router to deliver smooth, performant, and scalable navigation experiences.

In summary, React Router provides a flexible, declarative solution for client-side routing in React applications, enabling developers to manage navigation, route parameters, nested routes, and programmatic redirection efficiently, making it a cornerstone of modern single-page web development.