React Router vs. React Router DOM: Which One to Use?

Developers building web apps talk about React Router vs React Router DOM. Both are used for client-side routing in a React app but serve different purposes. Understanding the differences between these libraries will help you choose the right one for your project.

The react-router package is the core library that provides the core routing functionality, react-router-dom is an extension for web apps. The choice between the two depends on where you want to implement the routing logic.

This article will explain the differences, use cases, and key differences between these packages and how to do routing right.

What is a React Router?

React Router is a separate library that enables component-based routing in a React application. It is responsible for defining and handling different routes in an app.

Features of React Router

• Supports nested routes for better user interface organization.

• Provides client-side routing, preventing unnecessary full-page reloads.

• Handles dynamic routing, enabling flexible route components.

• Works with both React Native and React applications.

Installation of React Router

To install the react-router package directly, use the following command:

Copy
1npm install react-router

Since react-router itself is a core library, it does not include DOM-specific functions. This is why additional packages like react-router-dom or react-router-native are required.

What is React Router DOM?

React Router DOM is built on react-router and is designed for web applications. It includes DOM-specific APIs, allowing developers to work with the document object model efficiently.

Features of React Router DOM

• Provides all the common components needed for web applications.

• Includes a few DOM-specific APIs such as <BrowserRouter> and <HashRouter>.

• Supports nested routes and defining multiple routes.

• Helps in implementing dynamic routing with path parameters.

Installation of React Router DOM

To install the react-router-dom package, use:

Copy
1npm install react-router-dom

This package extends react-router by providing DOM-specific APIs to handle routing in web applications.

React Router vs. React Router DOM: Key Differences

The table below highlights the key differences between react-router and react-router-dom:

Implementing Routing with React Router DOM

For web applications, react-router-dom provides the necessary tools to define and manage route components.

Example: Basic Routing in React Router DOM

Copy
1import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
2import Home from "./Home";
3import About from "./About";
4import Contact from "./Contact";
5
6function App() {
7  return (
8    <Router>
9      <Routes>
10        <Route path="/" element={<Home />} />
11        <Route path="/about" element={<About />} />
12        <Route path="/contact" element={<Contact />} />
13      </Routes>
14    </Router>
15  );
16}
17
18export default App;

This example demonstrates how react-router-dom is used to define multiple routes in a React application.

React Router Native: Routing in React Native Applications

For React Native, react-router-native provides similar routing capabilities but is optimized for mobile applications.

Example: Using React Router Native

Copy
1npm install react-router-native

Copy
1import { NativeRouter, Route, Routes } from "react-router-native";
2import Home from "./Home";
3import Profile from "./Profile";
4
5function App() {
6  return (
7    <NativeRouter>
8      <Routes>
9        <Route path="/" element={<Home />} />
10        <Route path="/profile" element={<Profile />} />
11      </Routes>
12    </NativeRouter>
13  );
14}
15
16export default App;

This example shows how react-router-native provides routing for React Native applications.

Nested Routes in React Router DOM

Nested routes allow a parent component to contain multiple child components that render based on the route.

Example: Implementing Nested Routes

Copy
1import { BrowserRouter as Router, Route, Routes, Outlet } from "react-router-dom";
2
3function Dashboard() {
4  return (
5    <div>
6      <h2>Dashboard</h2>
7      <Outlet />
8    </div>
9  );
10}
11
12function Profile() {
13  return <h3>Profile Section</h3>;
14}
15
16function Settings() {
17  return <h3>Settings Section</h3>;
18}
19
20function App() {
21  return (
22    <Router>
23      <Routes>
24        <Route path="/dashboard" element={<Dashboard />}>
25          <Route path="profile" element={<Profile />} />
26          <Route path="settings" element={<Settings />} />
27        </Route>
28      </Routes>
29    </Router>
30  );
31}
32
33export default App;

Here, the <Outlet /> component ensures that nested routes render correctly inside the parent component.

Using Switch in React Router DOM (Before v6)

Before React Router v6, <Switch> was used to handle multiple routes.

Copy
1import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
2
3function App() {
4  return (
5    <Router>
6      <Switch>
7        <Route path="/" exact component={Home} />
8        <Route path="/about" component={About} />
9      </Switch>
10    </Router>
11  );
12}
13
14export default App;

The <Switch> component renders the first matching route and prevents further route matching.

React Router DOM Step-by-Step Setup

1. Install react-router-dom package:

Copy
1npm install react-router-dom

2. Import required components from react-router-dom.

3. Wrap the application inside <BrowserRouter>.

4. Define route components using <Routes> and <Route>.

5. Use <Link> or <NavLink> for navigation.

Choosing Between React Router and React Router DOM

Choosing between react-router vs. react-router-dom depends on the environment:

• Use react-router if building both React Native and web applications.

• Use react-router-dom if developing purely for web applications.

The difference react-router makes is that it acts as the core library, while react-router-dom extends it with DOM-specific APIs.

Final Thoughts on React Router vs React Router DOM

Choosing between react-router vs react-router-dom depends on the project. react-router handles the core routing and react-router-dom extends that for web-based projects using the DOM.

For mobile apps, react-router-native has specific APIs for React Native to make navigation easier on mobile platforms.

Both help with defining routing logic whether it is simple or complex routing structures. Pick the right one and you get a better user experience by navigating smoothly across different routes.