How to react router dom works in react js (Updated 2024)

165

React Router DOM is an essential library for managing navigation within React applications. It enables the development of single-page applications (SPAs) by allowing users to navigate between different components without reloading the page. Here’s how to get started with React Router DOM, from installation to basic setup.

React Router Components

React Router’s architecture is built around several key components: BrowserRouter, Routes, Route, and Link. Each plays a specific role in managing routing within React applications.

BrowserRouter

BrowserRouter is a router implementation that uses the HTML5 history API to keep your UI in sync with the URL. It wraps the part of your application that needs to be aware of navigation changes. When the URL changes, either due to a user action or programmatically, BrowserRouter listens to those changes and updates the application’s state, triggering a re-render with the new location.

Routes

Within a BrowserRouter, the Routes component acts as a container for Route components. It examines its children Route components to find one whose path matches the current URL. When it finds a match, it renders the corresponding component. This selective rendering based on the URL path allows for a modular and organized approach to handling different views in your application.

Route

The Route component is used to define the relationship between the URL path and the component that should be rendered. Each Route takes a path prop, specifying the URL segment it should respond to, and an element prop, indicating the component to render for that path. This direct mapping between paths and components forms the essence of React Router’s routing mechanism.

Link

The Link component enables navigation around the application in a declarative manner. Unlike traditional <a> tags, which trigger a full page reload, Link changes the URL programmatically via the React Router, avoiding unnecessary page reloads. It accepts a to prop, which specifies the path to navigate to, making it an essential tool for creating navigable interfaces without disrupting the SPA’s state and performance.

Together, these components (BrowserRouter, Routes, Route, and Link) provide a comprehensive suite for managing navigation within React applications. They allow developers to build complex, stateful web applications that offer a smooth, native-app-like user experience.

React Router Installation and Setup

Before diving into the routing logic, you’ll need to add React Router DOM to your project. This process involves two main steps: installing the package and importing the necessary modules.

Step 1: Installing React Router DOM

To add React Router DOM to your React project, open your terminal and run one of the following commands, depending on your package manager of choice:

For npm users:

npm install react-router-dom

For Yarn users:

yarn add react-router-dom

Step 2: Importing Router Components

With React Router DOM installed you can now import the required components for routing. The primary components you’ll use are BrowserRouter, Routes, and Route:

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

Step 3: Implementing Routing

Let’s create a simple routing structure within a React application to demonstrate how React Router DOM works. Here is an example of implementing routing on components:

App.js:

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

// Importing page components
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        {/* The Routes component decides which component to show based on the URL */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

In this setup, the BrowserRouter wraps our routing declaration, which includes a simple navigation bar and the Routes component. The Routes component then uses Route children to map URLs to components.

Defining Page Components

For this example, our routing setup includes three pages: Home, About, and Contact. Each page is represented by a component that returns JSX code. Here’s a brief look at the Home component:

Home.js:

import React from "react";

function Home() {
  return (
    <div>
      <h2>Home Page</h2>
      <p>Welcome to the home page!</p>
    </div>
  );
}

export default Home;

The About and Contact components are similarly structured, each rendering content appropriate for their respective pages.

Conclusion

This guide covers the basics of using React Router DOM to add routing functionality to a React application. Starting with installation and setup, we’ve walked through creating a simple application that uses BrowserRouter, Routes, and Route to navigate between different components. React Router DOM is a powerful tool for enhancing your React applications with SPA capabilities, ensuring a seamless user experience as they navigate through your application.

React Router – FAQ