Facebook Twitter Whatsapp Instagram
Subscribe now

React Router Dom NPM

Mastering react-router-dom NPM: A Developer’s Guide

If you’re building a React application, one of the first challenges you’ll face is handling client-side routing. Fortunately, the react-router-dom npm package simplifies this process. In this guide, we’ll explore what react-router-dom is, how to install and use it effectively, and why it’s a must-have in every React project.

What is react-router-dom NPM?

react-router-dom is a powerful routing library for React applications. It enables seamless navigation between views without refreshing the page. This improves user experience and performance, especially for single-page applications (SPAs). Installed via the Node Package Manager (npm), it offers tools like <BrowserRouter>, <Routes>, <Route>, and navigation hooks like useNavigate.

With react-router-dom, developers can create dynamic URLs, manage nested routes, and pass route parameters effortlessly. It integrates smoothly with React’s component structure, ensuring modular and maintainable code.

Installing react-router-dom via NPM

Before you use it, you need to install it. The package is available on npm, which is the standard JavaScript package registry.

To install it, run this command in your project directory:

bash
npm install react-router-dom

If you’re using React v18 or higher, make sure to install the correct version:

bash
npm install react-router-dom@6

React Router version 6 introduced significant updates to routing, such as the new <Routes> component and hooks for navigation.

Basic Setup with React Router

Initialize Browser Router

To use routing, wrap your application with <BrowserRouter> in the main entry file (index.js or App.js):

jsx
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);

Define Routes

Now define your routes using the <Routes> and <Route> components inside App.js:

jsx
import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

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

Each <Route> maps a URL path to a React component, enabling intuitive navigation across your app.

Navigating Between Routes

Using the <Link> Component

Instead of using traditional anchor tags, React Router provides the <Link> component for navigation. This prevents the full page reload.

jsx
import { Link } from 'react-router-dom';

<Link to="/">Home</Link>
<Link to="/about">About</Link>

Using the useNavigate Hook

For programmatic navigation (e.g., after form submission), use the useNavigate hook:

jsx
import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
navigate('/about');

This lets you redirect users without manual clicks.

Route Parameters and Dynamic Routing

Dynamic routing allows you to capture values from the URL using parameters.

jsx
<Route path="/user/:id" element={<UserProfile />} />

In the UserProfile component, you can access the id value using the useParams hook:

jsx
import { useParams } from 'react-router-dom';

const { id } = useParams();

This is extremely useful for building user dashboards, blog detail pages, or e-commerce product views.

Nested Routes and Layouts

React Router also supports nested routes. This lets you create layouts with shared components like navigation bars or sidebars.

Example:

jsx
<Route path="/dashboard" element={<DashboardLayout />}>
<Route path="overview" element={<Overview />} />
<Route path="settings" element={<Settings />} />
</Route>

The DashboardLayout component should use <Outlet /> to render the nested views.

jsx
import { Outlet } from 'react-router-dom';

function DashboardLayout() {
return (
<div>
<Sidebar />
<main>
<Outlet />
</main>
</div>
);
}

Protecting Routes with Authentication

You can create protected routes by checking user authentication status. For example:

jsx
const PrivateRoute = ({ children }) => {
const isAuthenticated = checkAuth();
return isAuthenticated ? children : <Navigate to="/login" />;
};

<Route path="/profile" element={<PrivateRoute><Profile /></PrivateRoute>} />

This ensures unauthorized users are redirected, keeping sensitive data safe.

Error Handling and 404 Pages

React Router allows for graceful error handling. To create a 404 page:

jsx
<Route path="*" element={<NotFound />} />

The wildcard * matches all unmatched routes, and you can display a user-friendly message or redirect.

Updating react-router-dom

To keep your application secure and up to date, periodically check for updates:

bash
npm outdated react-router-dom
npm install react-router-dom@latest

Always refer to the official changelog before updating major versions, especially when migrating from v5 to v6.

Best Practices for Using React Router

  • Use descriptive route paths (/user-profile instead of /up)

  • Keep routes centralized for better maintainability

  • Don’t mix <a> tags and <Link> components

  • Use dynamic imports (React.lazy) for large route components to improve performance

  • Handle redirects explicitly with <Navigate />

Real-World Use Cases

Whether you’re building a simple portfolio or a complex dashboard, react-router-dom handles routing efficiently. It’s used in countless production-grade React apps, from e-commerce sites to content management systems. By leveraging features like lazy loading, route guards, and nested layouts, you can create modular and scalable apps.

You can also connect your route structure to a centralized API or CMS, enabling dynamic page generation with parameters or query strings.

If you’re stuck while implementing routing logic or facing issues, visit the Dhanote IT Park Help Center for expert support and solutions.

FAQs 

What is the difference between React Router and React Router DOM?

React Router is the core library that works with different platforms like web and native.
React Router DOM is specifically designed for web apps, offering components like <BrowserRouter> and <Link>.

How do I install react-router-dom using npm?

Use the command:

bash
npm install react-router-dom

For React 18, use version 6 or higher.

Can I use React Router without Redux?

Absolutely. React Router manages routing, while Redux handles global state. They are independent tools.

Why is my route not working in React?

Check if:

  • You’re using <Routes> and not <Switch> in v6

  • Paths are correctly defined

  • <BrowserRouter> wraps your component tree

How do I redirect in React Router DOM?

Use the useNavigate() hook or <Navigate to="/path" /> component for redirection.

Is React Router DOM free?

Yes, it’s an open-source package under the MIT license.

How do I create nested routes?

Use nested <Route> components and include <Outlet /> in the parent layout to render children.

What is the role of <Outlet /> in React Router?

<Outlet /> renders the nested child route components within a parent layout.

How do I handle 404 errors in React Router?

Add a catch-all route:

jsx
<Route path="*" element={<NotFound />} />

react-router-dom npm package is an essential tool for building seamless, single-page React applications. With powerful features like dynamic routing, hooks, nested routes, and programmatic navigation, it gives developers full control over navigation logic. It’s simple to set up, easy to scale, and integrates cleanly into any React project.

Whether you’re new to React or scaling an enterprise-grade product, mastering react-router-dom will greatly enhance your development workflow. Start building better experiences today with modern routing capabilities.

Share This Post

Picture of mdijaz0103@gmail.com

mdijaz0103@gmail.com

All Posts

Popular Categories

Latest Post

Related Articles