# 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:

```bash
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:

```bash
npx create-react-app my-app
cd my-app
```

**2\. Setup Routing**

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

```javascript
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., &lt;About /&gt;).

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

---

**Dynamic Routing**

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

```javascript
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:

```javascript
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:

```javascript
<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](@codewithbhavik)

/