NPM Star
Collections
  1. Home
  2. Compare
  3. react-router vs react-router-dom
NPM Compare

Compare NPM packages statistics, trends, and features

CollectionsVS Code extensionChrome extensionTermsPrivacy

React Router Core vs React Router DOM: Web Navigation Tools

These packages work together to handle webpage navigation in React applications. React Router is the core routing library containing the main routing logic, while React Router DOM adds specific tools for web browsers. Most web developers only need to install react-router-dom, as it includes react-router as a dependency and provides all the necessary browser-specific components.

React NavigationroutingnavigationreactbrowserURL management

Detailed Comparison

Technical Analysis

featureComparison

Both packages provide client-side routing for React applications. react-router provides the core routing functionality, while react-router-dom provides additional DOM-related features, such as Link and NavLink components.

typescriptSupport

Both packages have excellent TypeScript support, with type definitions included in the package.

browserCompatibility

Both packages are compatible with modern browsers, including Chrome, Firefox, Safari, and Edge.

dependencies

react-router-dom depends on react-router, and both packages depend on react.

performance

Both packages have similar performance characteristics, with efficient route matching and rendering.

Ecosystem Analysis

frameworkCompatibility

Both packages are designed for use with React, and are compatible with popular frameworks like Create React App and Next.js.

communityActivity

Both packages have an active community, with frequent updates and issues resolved quickly.

documentationQuality

Both packages have excellent documentation, with clear guides and API references.

maintenanceStatus

Both packages are actively maintained by the React Training team, with regular updates and bug fixes.

Performance Comparison

bundleSizeAnalysis

react-router-dom has a larger bundle size due to the additional DOM-related features.

runtimePerformance

Both packages have similar runtime performance, with efficient route matching and rendering.

loadingTime

Both packages have similar loading times, with react-router-dom slightly slower due to the additional features.

memoryUsage

Both packages have similar memory usage, with efficient use of resources.

Code Examples

Basic Routing with react-router

1import { BrowserRouter, Route, Link } from 'react-router-dom';
2
3function App() {
4  return (
5    <BrowserRouter>
6      <div>
7        <h1>Home</h1>
8        <Link to="/about">About</Link>
9      </div>
10      <Route path="/about">
11        <h1>About</h1>
12      </Route>
13    </BrowserRouter>
14  );
15}

This example shows how to use react-router-dom to create a basic routing system, with a link to an 'about' page.

Route Parameters with react-router

1import { BrowserRouter, Route, Link } from 'react-router-dom';
2
3function App() {
4  return (
5    <BrowserRouter>
6      <div>
7        <h1>Users</h1>
8        <Link to="/users/1">User 1</Link>
9      </div>
10      <Route path="/users/:id">
11        <h1>User {match.params.id}</h1>
12      </Route>
13    </BrowserRouter>
14  );
15}

This example shows how to use react-router to create routes with parameters, such as a user ID.

Recommendation

Summary

Both packages are excellent choices for client-side routing in React applications. react-router provides a lightweight, flexible routing system, while react-router-dom provides additional DOM-related features.

Details

  • Use react-router for a lightweight, flexible routing system.
  • Use react-router-dom for a more comprehensive routing system with additional DOM-related features.

Similar Packages

reach/router

95%

A routing library built by the original creator of React Router. Focuses on accessibility and simplicity, with built-in focus management for screen readers.

Very similar to React Router but with better accessibility features built-in. Good for projects where accessibility is a top priority.

React Routing

wouter

90%

A tiny router for React that's simpler than React Router. It has a very small size (1KB) and provides basic routing features like path matching and navigation.

Perfect for small to medium projects where you don't need all of React Router's complex features. It uses a similar API to React Router so it's easy to learn if you know React Router.

React Routing

next/router

70%

The built-in router that comes with Next.js framework. Provides file-system based routing and easy page transitions with zero configuration needed.

Great alternative if you're using Next.js. No need to install additional packages, and it's simpler to use because routing is based on your folder structure.

React Routing

universal-router

60%

A simple middleware-style router that can work with any JavaScript framework, not just React. Supports async routes and nested routes.

Good choice if you want a framework-agnostic router that might work across different projects. Simpler than React Router but still powerful.

JavaScript Routing

No README available

No README available

Dependencies Comparison

react-router

Dependencies

cookie^1.0.1
turbo-stream2.4.0
@types/cookie^0.6.0
set-cookie-parser^2.6.0

Dev Dependencies

tsup^8.3.0
react^18.2.0
rimraf^6.0.1
wireit0.14.9
react-dom^18.2.0
typescript^5.1.6
@types/set-cookie-parser^2.4.1

Peer Dependencies

react>=18
react-dom>=18

react-router-dom

Dependencies

react-router7.1.3

Dev Dependencies

tsup^8.3.0
react^18.2.0
wireit0.14.9
react-dom^18.2.0
typescript^5.1.6

Peer Dependencies

react>=18
react-dom>=18
StarsIssuesVersionUpdatedⓘLast publish dateCreatedⓘPackage creation dateSizeⓘMinified + Gzipped size
R
react-router
53,8082257.1.3a month ago11 years agoinstall size 46.3 KB
R
react-router-dom
53,8082257.1.3a month ago9 years agoinstall size 335 B

Who's Using These Packages

react-router

lore
lore

Respectfully opinionated convention-driven framework for building React applications. Built on React, Webpack, Redux, and React Router.

react-antd-admin-pnpm
react-antd-admin-pnpm

基于react18, antd5开发的gbeata-admin 后台管理系统，gbeata组件库

xoom-designer
xoom-designer

The VLINGO XOOM Designer to guide you in rapid delivery of low-code to full-code Reactive, Event-Driven Microservices and Applications using DOMA, DDD, and other approaches.

geoplumber
geoplumber

Serve geographic data from R and consume with scalable front end.

arranger
arranger

Data portal API and component generation

react-router-dom

lore
lore

Respectfully opinionated convention-driven framework for building React applications. Built on React, Webpack, Redux, and React Router.

react-antd-admin-pnpm
react-antd-admin-pnpm

基于react18, antd5开发的gbeata-admin 后台管理系统，gbeata组件库

xoom-designer
xoom-designer

The VLINGO XOOM Designer to guide you in rapid delivery of low-code to full-code Reactive, Event-Driven Microservices and Applications using DOMA, DDD, and other approaches.

geoplumber
geoplumber

Serve geographic data from R and consume with scalable front end.

arranger
arranger

Data portal API and component generation