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 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: Contains the core functionality of React Router, including route-matching algorithms and hooks.
- react-router-dom: Includes everything in react-router and adds a few DOM-specific APIs.
- react-router-native: 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 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 .
import { BrowserRouter, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
</BrowserRouter>
);
}
export default App;
Step 3 : Import and use the child component, .
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: 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: Routes is a new component introduced in v6 that replaces the switch component. (Switch renders a route exclusively as it displays the first child route that matches the current URL).
- Route: 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: 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.
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.
<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 and .
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 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, support portal, or feedback portal. We are always happy to assist you!
Oldest comments (0)