React Router vs. React Router DOM
Tags: react, webdev
Published: 2022-10-10 12:39:19

---
title: React Router vs. React Router DOM
published: true
date: 2022-10-05 11:00:41 UTC
tags: react, webdev
canonical_url: https://www.syncfusion.com/blogs/post/react-router-vs-react-router-dom.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgn4wwwja7rwbqoyp18o.png
---

Routing is an essential technique for navigation among pages on a website based on user requests and actions. A separate library named **React Router** enables routing in React applications and allows defining multiple routes in an application. But whether to install the **react-router** or **react-router-dom** package can be confusing. This article addresses this confusion by analyzing their differences and where to use which package.

## **Why Is React Router Needed?**

React is a famous JavaScript framework ideal for building single-page applications. Although it is one of the best solutions for building websites, React does not include many advanced features or routing by default. Therefore, React Router is an excellent choice of navigation for these single-page applications to render multiple views.

## **What Is React Router?**

[React Router](https://reactrouter.com/docs/en/v6 "React Router") is a popular standard library for routing among various view components in React applications. It helps keep the user interface in sync with the URL. In addition, React Router allows defining which view to display for a specified URL.

The three main packages related to React Router are:

- [react-router](https://www.npmjs.com/package/react-router "react-router NPM package"): Contains the core functionality of React Router, including route-matching algorithms and hooks.
- [react-router-dom](https://www.npmjs.com/package/react-router-dom "react-router-dom NPM package"): Includes everything in **react-router** and adds a few DOM-specific APIs.
- [react-router-native](https://www.npmjs.com/package/react-router-native "react-router-native NPM package"): Includes everything in **react-router** and adds a few React Native-specific APIs.

## What Is React Router DOM?

The primary functionality of [react-router-dom](https://www.npmjs.com/package/react-router-dom "react-router-dom NPM package") is implementing dynamic routing in web applications. Based on the platform and the requirements of the application, **react-router-dom** supports component-based routing, which is the ideal solution for routing if the React application is running on the browser.

### How to Use React Router DOM

**Step 1** : Install the package.

```npm install react-router-dom```

**Step 2** : Import  **<BrowserRouter>**.

```js
import { BrowserRouter, Route } from 'react-router-dom';

function App() {
 return (
  <BrowserRouter>

  </BrowserRouter>
 );
}

export default App;
```

**Step 3** : Import and use the child component, **<Route>**.

```js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import About from './components/about';
import Home from './components/home';

function App() {
 return (
  <BrowserRouter>
   <div><Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
   </div>
  </BrowserRouter>
 );
}
```

As the URL changes to the specified paths, the user interface also changes to display the specific component. Following are several components that you can use in your application.

- [BrowserRouter](https://reactrouter.com/en/6.4.1/router-components/browser-router "React BrowserRouter component"): **_BrowserRouter_** is a parent component in **react-router-dom** that stores all the other route components. Allowing the declaration of individual routes is the main functionality of using **BrowserRouter** in the application.
- [Routes](https://reactrouter.com/en/6.4.1/components/routes "React Routes component"): **Routes** is a new component introduced in [v6](https://reactrouter.com/en/v6.3.0 "React Router version 6") that replaces the [switch](https://v5.reactrouter.com/web/api/Switch "React Router Switch component") component. (Switch renders a route exclusively as it displays the first child route that matches the current URL).
- [Route](https://reactrouter.com/en/6.4.1/route/route "React Route component"): **Route** is the child component that renders a specific UI component when the URL matches the specified path. The **path** attribute specifies the path name we assign to the component and the **_element_** attribute refers to the component to render when the URL matches.
- [Link](https://reactrouter.com/en/6.4.1/components/link "React Link component"): As its name suggests, **Link** allows a user to navigate to another page by clicking on it. For instance, you can use it when creating the application’s navigation bar. It is possible to add inline styling to this component.
```js
function Navbar() {
  return (
    <nav>
          <Link to="/">Home</Link>
          <Link to="/profile">Profile</Link>
    </nav>
  )
}
```

### Handling Not Found Pages

There may be instances when users attempt to access a path that does not exist within the application. In such instances, you can set an asterisk (\*) as the **path** to direct the user to the **Page Not Found** page.

```xml
<BrowserRouter><Routes><Route path="/" element={<Home />} />
       <Route path="/about" element={<About />} />
       <Route path="*" element={<PageNotFound />} />
   </Routes>
</BrowserRouter>
```

After declaring the path as shown in the previous code snippet, the user will see the **Page Not Found** page if they enter an incorrect path. For convenience, you can even add a link to the **Home** page within the **Page Not Found** page.

## React Router vs. React Router DOM: the Difference

**react-router** is the core package containing standard components and functionalities to implement routing in React applications.

On the other hand, **react-router-dom** is a specialized package that you can use **only in web-browser-based application development**. It exports **react-router** as a dependency and has additional DOM (document object model) bindings such as <BrowserRouter> and <Link>.

### When to Use Which

If you are working on a web application, the better option is to use **react-router-dom** , because it contains all the necessary common components and features essential for routing in a web application. **react-router-dom** installs **react-router** as a dependency, so there is no need to re-install and import anything directly from the **react-router**.

Even on mobile applications with React Native, **react-router-native** is enough, for the same reason as **react-router-dom** is enough in web apps.

Because of that, there is no need to import the **react-router** package directly anywhere, as **react-router-dom** and **react-router-native** provide all the required functionalities.

## Conclusion

This article discussed the features and uses of React Router, the significant difference between the libraries **react-router** and **react-router-dom** , and when to use which one. In addition, there was an overview of the **react-router-dom** package and how to use it in a React application. So, I hope this article clears up a confusion about which package to install for implementing routing in your React application.

Thank you for reading!

The [Syncfusion Essential Studio for React](https://www.syncfusion.com/react-ui-components "Syncfusion React UI components") suite offers over 70 high-performance, lightweight, modular, and responsive UI components in a single package. It’s the only suite you’ll ever need to construct a complete app.

If you have questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Lazy Loading with React–An Overview](https://www.syncfusion.com/blogs/post/lazy-loading-with-react-an-overview.aspx "Blog: Lazy Loading with React–An Overview")
- [Top 7 React Animation Libraries in 2022](https://www.syncfusion.com/blogs/post/top-7-react-animation-libraries-in-2022.aspx "Blog: Top 7 React Animation Libraries in 2022")
- [Functional Reactive Programming with Node.js Streams](https://www.syncfusion.com/blogs/post/functional-reactive-programming-with-node-js-streams.aspx "Blog: Functional Reactive Programming with Node.js Streams")
- [Recoil: the Future of State Management for React?](https://www.syncfusion.com/blogs/post/recoil-the-future-of-state-management-for-react.aspx "Blog: Recoil: the Future of State Management for React?")