Skip to main content

React Router DOM

React Router DOM is a widely used library for handling routing in React applications, particularly those designed for web browsers. It provides a set of components and hooks that enable declarative navigation and URL management within single-page applications (SPAs).

Key features and functionalities of React Router DOM:

  • Declarative Routing: It allows defining routes as components, making the routing logic intuitive and integrated with the React component tree.

  • Browser-Specific Components: It includes components like <BrowserRouter>, <Link>, and <NavLink> that specifically interact with the browser's history API and render standard HTML elements for navigation.

  • Dynamic Routing: Enables the creation of routes with dynamic parameters, allowing for flexible URL structures and data fetching based on the route.

  • Nested Routes: Supports the creation of hierarchical routes, where parent routes can render child routes, facilitating complex application layouts.

  • Programmatic Navigation: Provides hooks like useNavigate for imperative navigation, allowing redirection or programmatically changing routes based on user actions or application logic.

  • Route Guards and Authentication: Can be used to implement route protection, ensuring users are authenticated or authorized before accessing certain parts of the application.

Installation:

To use React Router DOM in a React project, it needs to be installed as a dependency:


Code

npm install react-router-dom
Basic Usage Example:
Code

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

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>
  );
}

function Home() {
  return <h1>Welcome to the Home Page!</h1>;
}

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

export default App;

Note on React Router v7:

With React Router v7, the react-router-dom package primarily re-exports the contents of react-router. While react-router-dom can still be used for compatibility with older projects or during upgrades, new projects are encouraged to use react-router directly for web applications, as the browser-specific functionalities are now integrated within the core react-router package

 

react-router-dom enables declarative, component-based routing in React web apps, allowing single-page applications (SPAs) to navigate between different views/components without full page reloads, managing browser history, supporting dynamic URLs (with parameters), creating nested routes for complex layouts, handling authentication (route guards), and providing tools for bookmarkable links and programmatic navigation via hooks like useNavigate (formerly useHistory) and useLocation, all through DOM-aware components like <BrowserRouter>, <Link>, and <Route>. 


This video provides a complete tutorial on the basics of React Router:

Core Uses & Features

  • Client-Side Routing: Maps URLs to specific components, rendering them without server requests, perfect for SPAs.
  • No Page Reloads: Smooth transitions between "pages" using JavaScript, enhancing user experience.
  • URL Management: Creates clean, bookmarkable URLs and uses the browser's history stack.
  • Declarative Routing: Defines routes using components like <BrowserRouter>, <Routes>, and <Route>.
  • Dynamic Routes: Handles URLs with parameters (e.g., /users/:id) to show dynamic content.
  • Nested Routes: Organizes complex UIs by rendering child routes within parent routes.
  • Programmatic Navigation: Navigate programmatically with useNavigate (or useHistory) or declaratively with <Navigate>.
  • Data Loading: Modern versions (v7+) allow data fetching directly in route definitions (loaders/actions). 
You can watch this video to see how to perform simple navigation between pages in React:

Key Components & Hooks (v6+)

  • <BrowserRouter>: The main router that uses the HTML5 History API.
  • <Routes> / <Route>: Renders components for matching paths.
  • <Link> / <NavLink>: Renders <a> tags for navigation without page reloads.
  • useNavigate: Hook for imperative navigation.
  • useParams: Hook to access dynamic URL parameters.
  • useLocation: Hook to get current location data.
  • Outlet: Renders nested child routes. 

When to Use It

  • Web Applications: Use react-router-dom for any React app running in a web browser.
  • Complex Layouts: Ideal for apps with dashboards, multi-step forms, or admin panels.
  • Single-Page Apps (SPAs): Essential for building SPAs that feel like traditional multi-page sites. 
This video provides a complete tutorial on the basics of React Router:

 

 

 

Back to top