What is the difference between React Router and React Router DOM?

This content originally appeared on DEV Community and was authored by Pramod Boda

react-router and react-router-dom are libraries used for routing in React applications. They allow you to create single-page applications (SPAs) where navigation between different views or pages happens without a full page reload. Here's a detailed explanation of both:

1. What is react-router?

• react-router is the core routing library for React applications.
• It provides the basic fundamental routing functionality, such as matching URLs to components and managing navigation. but it does not include anything specific to web applications.
• It contains essential components like Routes, Route, and Outlet.
• It is framework-agnostic, meaning it does not just depend on the web. but it can be used with React for web applications, React Native for mobile apps, or even other environments.
• You don't typically install or use react-router directly in web projects.
• This package is used as a foundation for other libraries like react-router-dom (for web apps) and react-router-native (for React Native apps).
• Key Features:
  • Declarative routing (defining routes using components).
  • Dynamic routing (routes can be added or removed at runtime).
  • Nested routes (routes within routes).
  • Programmatic navigation (e.g., redirecting users programmatically).
• Use Case:
  • react-router is typically used as a dependency for other routing libraries like react-router-dom (for web) or react-router-native (for mobile).

2. What is react-router-dom?

• react-router-dom is the official routing library for React web applications. It is built on top of react-router and provides additional components and hooks specifically designed for web development.
• It provides additional web-related components like BrowserRouter, HashRouter, Link, NavLink, and hooks like useNavigate, useParams, and useLocation.
• Key Features:
  • BrowserRouter: Uses the HTML5 History API (pushState, replaceState, etc.) to keep the UI in sync with the URL.
  • HashRouter: Uses the hash portion of the URL (e.g., #/about) for routing, which is useful for older browsers or static deployments.
  • Link and NavLink: Components for creating navigation links.
  • useHistory (in older versions, replaced with useNavigate in v6)
  • useNavigate: A hook for programmatic navigation.
  • useParams: A hook for accessing route parameters (e.g., :id in /users/:id).
  • useLocation: A hook for accessing the current URL location.
• Use Case:
  • react-router-dom is used for building web applications with client-side routing. It is the most common choice for React web apps.

3. Key Differences Between react-router and react-router-dom

Installation

To use react-router-dom in your project, install it via npm or yarn:

npm:

npm install react-router-dom

or with yarn:

yarn add react-router-dom

Example Usage of react-router-dom

Basic Routing Setup:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import UserProfile from './UserProfile';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/user/123">User Profile</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>
    </Router>);
}

export default App;

Using useNavigate for Programmatic Navigation:

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

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

  const handleLogin = () => {
    // Perform login logic
    navigate('/dashboard'); // Redirect to the dashboard after login
  };

  return <button onClick={handleLogin}>Login</button>;
}

export default LoginButton;

Using useParams to Access Route Parameters:

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

function UserProfile() {
  const { id } = useParams(); // Access the `id` parameter from the URL

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

export default UserProfile;

4. How They Work Together?

• react-router-dom is built on top of react-router. It extends the core functionality of react-router with web-specific features.
• When you install react-router-dom, it automatically includes react-router as a dependency.

5. Which One Should You Use?

• If you are building a React web application, use react-router-dom.
• If you are creating a library or a React Native app, use react-router (along with react-router-native for mobile apps).
• If you're creating a custom routing solution, you might need react-router internally.

6. What Has Changed in 2025?

• React Router v6+ is now the standard, focusing on component-based routing.
• Hooks like useHistory (deprecated) are fully replaced by useNavigate.
• react-router is rarely used directly in web projects, while react-router-dom is the main package for web routing.

Summary

• react-router: The core routing library for React.
• react-router-dom: The web-specific routing library built on top of react-router.
• Use react-router-dom for web applications to take advantage of web-specific features like BrowserRouter, Link, and useNavigate.

If you're building a web application, you only need to install and use react-router-dom. It will automatically include react-router as a dependency.

This content originally appeared on DEV Community and was authored by Pramod Boda

Print Share Comment Cite Upload Translate Updates

APA

Pramod Boda | Sciencx (2025-02-25T00:25:14+00:00) What is the difference between React Router and React Router DOM?. Retrieved from https://www.scien.cx/2025/02/25/what-is-the-difference-between-react-router-and-react-router-dom/

MLA

" » What is the difference between React Router and React Router DOM?." Pramod Boda | Sciencx - Tuesday February 25, 2025, https://www.scien.cx/2025/02/25/what-is-the-difference-between-react-router-and-react-router-dom/

HARVARD

Pramod Boda | Sciencx Tuesday February 25, 2025 » What is the difference between React Router and React Router DOM?., viewed ,<https://www.scien.cx/2025/02/25/what-is-the-difference-between-react-router-and-react-router-dom/>

VANCOUVER

Pramod Boda | Sciencx - » What is the difference between React Router and React Router DOM?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/02/25/what-is-the-difference-between-react-router-and-react-router-dom/

CHICAGO

" » What is the difference between React Router and React Router DOM?." Pramod Boda | Sciencx - Accessed . https://www.scien.cx/2025/02/25/what-is-the-difference-between-react-router-and-react-router-dom/

IEEE

" » What is the difference between React Router and React Router DOM?." Pramod Boda | Sciencx [Online]. Available: https://www.scien.cx/2025/02/25/what-is-the-difference-between-react-router-and-react-router-dom/. [Accessed: ]

rf:citation

» What is the difference between React Router and React Router DOM? | Pramod Boda | Sciencx | https://www.scien.cx/2025/02/25/what-is-the-difference-between-react-router-and-react-router-dom/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.