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

Take our React skill challenge to evaluate yourself!

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET FREE CHALLENGE