How to Use React Router DOM: A Comprehensive Guide

React Router DOM is a powerful library for creating dynamic and seamless navigation in React applications. Whether you’re building a single-page application (SPA) or a more complex multi-page app, React Router DOM provides the tools you need to manage routes effortlessly. This guide will walk you through the basics of React Router DOM, including its installation, setup, and usage.

---

What is React Router DOM?

React Router DOM is a client-side routing library for React. It allows developers to implement navigation between views (or “pages”) without requiring a page reload. This makes for a smoother and faster user experience.

---

Installation

To get started with React Router DOM, you first need to install it in your project. Run the following command in your terminal:

npm install react-router-dom

Make sure you also have React and ReactDOM installed as prerequisites.

Basic Concepts

1. Router: The base component that enables routing.

2. Route: Defines a mapping between a URL and a component.

3. Link: Used for navigation between routes.

4. Switch: Renders the first matching route.

5. useNavigate and useParams: Hooks for programmatic navigation and extracting route parameters.

Setting Up React Router

Here’s an example to demonstrate the basic setup:

1. Create a React Project

If you don’t have a project already, create one using:

npx create-react-app my-app
cd my-app

2. Setup Routing

Edit the App.js file to include a basic routing structure.

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

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;
const Contact = () => <h1>Contact Page</h1>;

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

Understanding the Code

1. BrowserRouter (Router): Wraps the application and enables routing.

2. Routes: Groups all Route components.

3. Route: Maps a path (e.g., /about) to a React component (e.g., <About />).

4. Link: Renders navigation links without reloading the page.

---

Dynamic Routing

React Router DOM also supports dynamic routing using parameters. Here’s an example:

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

const User = () => {
  const { id } = useParams();
  return <h1>User ID: {id}</h1>;
};

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </Router>
  );
}

export default App;

If you navigate to /user/42, the output will display: User ID: 42.

Navigating Programmatically

For programmatic navigation, use the useNavigate hook:

import React from "react";
import { useNavigate } from "react-router-dom";

const Dashboard = () => {
  const navigate = useNavigate();

  return (
    <div>
      <h1>Dashboard</h1>
      <button onClick={() => navigate("/about")}>Go to About</button>
    </div>
  );
};

export default Dashboard;

Clicking the button will redirect the user to the /about route.

---

Error Handling with Route

You can create a “404 Not Found” page by adding a catch-all route at the end:

<Route path="*" element={<h1>404 - Not Found</h1>} />

Conclusion

React Router DOM simplifies navigation and routing in React applications. With its rich API and ease of use, you can build dynamic, multi-page apps that feel like SPAs. Start with the basics, explore hooks like useNavigate and useParams, and create seamless navigation experiences for your users.

Happy coding! 🎉

Bhavik Bhuva

/