✅ What is React Router?

React Router is the standard routing library for React applications. It enables you to build Single-Page Applications (SPAs) where navigation happens without a full page reload. Instead of fetching a new HTML page from the server, React Router updates the UI by rendering different components based on the URL, while keeping the browser history in sync using the History API.
With React Router, users can bookmark pages, refresh URLs, and use the browser’s back and forward buttons, while developers can cleanly map URLs to specific components.

🚀 Why Use React Router?

React Router solves the problem of navigation in React apps by providing a declarative and flexible routing system. It allows you to map URLs to components, navigate between pages without reloads using Link or useNavigate, read dynamic URL parameters like /products/:id with useParams, work with query strings using useSearchParams, build nested routes and shared layouts with Outlet, protect routes using authentication logic, and lazy-load pages to improve performance.

🧠 Core Components & Hooks (v6+)

At the heart of React Router are a few important building blocks. BrowserRouter is the most common router for web apps and uses the HTML5 History API. Routes and Route define path-to-component mappings. Link and NavLink create navigation links without full reloads, with NavLink supporting active styles. useNavigate lets you navigate programmatically. useParams reads dynamic route parameters. useLocation gives access to the current URL object. useSearchParams helps manage query strings. Outlet is used to render child routes inside a layout component.

🔧 Example 1: Basic Setup

First, install the library and wrap your app with BrowserRouter.

npm install react-router-dom

import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

This enables routing throughout your application.

🔄 Example 2: Nested Routes & Layouts

Nested routes let you share layouts across multiple pages.

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

function Layout() {
  return (
    <div>
      <nav>
        <NavLink to="/">Home</NavLink> |{" "}
        <NavLink to="/products">Products</NavLink>
      </nav>
      <Outlet />
    </div>
  );
}

function Home() {
  return <h2>Welcome to our store</h2>;
}

function Products() {
  return <h2>Our Products</h2>;
}

export default function App() {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Products />} />
      </Route>
    </Routes>
  );
}

Here, Layout is shared, and Outlet renders the matched child route.

📌 Example 3: Dynamic Routes with Params

Dynamic routes are useful when rendering data-driven pages.

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

function ProductDetail() {
  const { id } = useParams();
  return <h2>Product ID: {id}</h2>;
}

Now visiting /products/42 will render Product ID: 42.

🛡 Example 4: Protected Route

You can guard routes based on authentication or permissions.

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

function ProtectedRoute({ children }) {
  const isAuthenticated = false; // replace with real auth logic
  return isAuthenticated ? children : <Navigate to="/login" />;
}

Wrap sensitive pages with ProtectedRoute to restrict access.

⚡ Example 5: Lazy Loading a Page

Lazy loading helps reduce initial bundle size and improves performance.

import React, { lazy, Suspense } from "react";

const ProductDetail = lazy(() => import("./ProductDetail"));

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <ProductDetail />
    </Suspense>
  );
}

The ProductDetail page is loaded only when needed.

✅ Best Practices

Use NavLink when you need active link styling. Organize routes logically, such as grouping dashboard-related pages under /dashboard. Lazy-load routes to improve performance. Always handle unknown routes using a wildcard (*) for 404 pages. Keep authentication and authorization logic separate from routing definitions for cleaner code.

🧾 Conclusion

React Router is an essential tool for building modern, fast, and user-friendly React applications. By mastering routing concepts like nested layouts, dynamic parameters, protected routes, and lazy loading, you can create SPAs that feel smooth, intuitive, and close to native applications.

React Router in 2025: A Complete Guide with Examples for Beginners