React-Router-Dom-npm - Everything You Need to Know

react-router-dom is a routing library for React applications that run in the browser. The react-router-dom library is important for React developers working on React Applications. It helps them with dynamic routing within web apps.

This React Tutorial will give a gist of the meaning of react-router-dom, react-router-dom example, and much more. 70% of front-end job listings now require React.js expertise. Don’t get left behind—join our Free React Course with Certificate and build in-demand skills!

What is react-router-dom?

react-router-dom is an standard library for handling routing in React applications. It enables navigating between different components or pages in a React app without reloading the page—creating a Single Page Application (SPA) experience.

Why to Use react-router-dom ?

1. Single-Page Applications

• One of the most favored tools for managing routes within SPAs is react-router-dom.
• react-router-dom allows navigating between pages (components) without reloading the page.
• This library helps developers create navigable and dynamic user interfaces with ease.

2. URL-Based Navigation

• Provides a way to manipulate the browser's URL, which enhances the user experience and supports deep linking.

3. Code Organization

• Helps organize code by splitting app into routes (pages or views).
• Makes large apps more maintainable.

4. Powerful Features

• It contains features like Route protection (authentication/authorization)Nested routes,Redirects,Lazy loading components for best performance.

5. Widely Adopted & Well Maintained

• It's the official routing library from the React community.
• Highly compatible with React best practices.

Core Concepts of React Router DOM

In order to fully grasp the code, you need to know the fundamental aspects of react-router-dom:

Routes (Dynamic Routing)

• These are used specifically to determine the path that your app will use and choosewhich component to present according to a given URL.
• Allows defining dynamic routes with URL parameters.

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

Navigation

• React Navigation allows users to move between different parts of the application without refreshing the page.
• Link replaces anchor tags (<a>), so navigation is done without page reloads.

  
<Link to="/contact">Contact Us</Link>

Components

• react-router-dom provides several components that help set up and manage routing in a React application.

Using <BrowserRouter> and <Routes> to Set Up Routing

The first step in using react-router-dom is to set up the routing context with <BrowserRouter>. This component wraps your entire application and enables the use of the routing components.

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Define your routes here */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Defining Routes with the <Route> Component

import Home from './Home';
import About from './About';

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

Creating Navigation Links with <Link>

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

Handling Dynamic URLs with Route Parameters

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

function UserProfile() {
  const { userId } = useParams();
  return <div>User Profile: {userId}</div>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:userId" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

Nested Routing for Complex UIs in React Router DOM

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <Routes>
        <Route path="stats" element={<Stats />} />
        <Route path="settings" element={<Settings />} />
      </Routes>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard/*" element={<Dashboard />} />
      </Routes>
    </BrowserRouter>
  );
}

Additional Features

1. Redirects

import { Navigate } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/old-path" element={<Navigate to="/new-path" />} />
        <Route path="/new-path" element={<NewComponent />} />
      </Routes>
    </BrowserRouter>
  );
}

2. Route Guards

3. Custom Route Handling with use routes

4. Programmatic Navigation with us navigate

5. Lazy Loading with React.lazy

Conclusion