TL;DR: Unsure about React Router vs React Router DOM? This guide clarifies the key differences! React Router DOM simplifies navigation in your web applications, keeping the URL and UI in sync. It’s the go-to choice for web development, offering a smooth setup and essential components for a great user experience.
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.
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.
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:
The primary functionality of react-router-dom 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.
Step 1: Install the package.
npm install react-router-dom
Step 2: Import <BrowserRouter>.
import { BrowserRouter, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
</BrowserRouter>
);
}
export default App; Step 3: Import and use the child component, <Route>.
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.
function Navbar() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/profile">Profile</Link>
</nav>
)
} 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.
<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 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>.
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.
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 suite offers over 80 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, support portal, or feedback portal. We are always happy to assist you!