React-router vs react-router-dom, when to use one or the other?
This question explains the roles of react-router and react-router-dom in a React application, helping you understand which one to install and import based on your project’s environment (web vs. native).
If you've worked with routing in React, you've probably come across both react-router and react-router-dom. They might seem interchangeable at first, but they serve different purposes in the React ecosystem.
1. react-router – The Core Library
- This is the base package that provides the core routing logic and components like Routes, Route, Navigate, etc.
- It’s not tied to any specific platform (like the web or mobile).
- You usually don’t install or import this directly in a typical web app—react-router-dom depends on it.
2. react-router-dom – For Web Applications
- This package extends react-router and adds DOM-specific features like BrowserRouter, Link, and useNavigate.
- It’s what you should install and use for building web-based React apps.
npm install react-router-dom 3. What about mobile or native?
If you're building a React Native app, you'd use react-router-native instead of react-router-dom.
When to Use What
- Web app? Use react-router-dom.
- Custom or shared routing logic (like in a library)? You might depend only on react-router.
- React Native app? Use react-router-native.
So in short, think of react-router as the brains of the routing system, and react-router-dom as the web-specific interface. Most web projects only need to interact with react-router-dom.