React Router vs. React Router DOM: Key Differences Explained

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

Feature	react-router	react-router-dom
Purpose	Core routing library for React	Web-specific routing library for React apps
Web/ Browser Support	No direct support	Supports web routing (BrowserRouter, HashRouter)
Components	No UI components. Basic essential routing components like Routes, Route and Outlet.	Web-specific components like BrowserRouter, Link, NavLink etc.
Hooks	Basic routing hooks	Web-specific hooks like useNavigate, useLocation, etc.
Environment	Works with React, React Native, etc.	Specifically for web applications
Dependency	Independent	Depends on react-router

---

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.

Comments

[Himanshu Sorathiya]

Top notch explanation about it, clearly mentioning difference and also clearing doubt that react router is core and react router Dom ( which we mostly use ), is built on top of it

[Pramod Boda]

"Glad you found the explanation helpful! 😊 Yes, React Router is the core library that provides routing logic, while React Router DOM is the DOM-specific implementation built on top of it for web applications. Thanks for pointing that out—it’s a key distinction that often gets overlooked!"