Fetch Data Using React Router Dom v6
Tags: webdev, react, reactrouterdom
Published: 2024-03-18 10:04:02

There are numerous ways to fetch data in a react application. React router dom also provides us with one option. We can efficiently retrieve data with react router dom v6.

## Fetching data using react-router-dom
**Step-01:** 
Create a react project using vite
**Step-02:** 
Create a directory as **pages** in the **src** directory
**Step-03:** 
In the pages directory create three files as follows
```bash
touch Home.jsx Contact.jsx Products.jsx
```
**Step-04:** 
Install react-router dom

```bash
npm install react-router-dom
```
**Step-05:** 
Now create a directory as **layouts** in the **src** directory and then create two files as MainLayout.jsx and Navbar.jsx

```bash
mkdir layouts
touch MainLayout.jsx Navbar.jsx
```
**Step-06:** 
Here we will edit the MainLayout and Navbar files

```js
// Navbar.jsx
import React from "react";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  return (
    <div>
      <ul>
        <li>
          <NavLink
            to="/"
            className={({ isActive }) => `${isActive ? "active" : "normal"}`}
          >
            Home
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/products"
            className={({ isActive }) => `${isActive ? "active" : "normal"}`}
          >
            Products
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/contact"
            className={({ isActive }) => `${isActive ? "active" : "normal"}`}
          >
            Contact
          </NavLink>
        </li>
      </ul>
    </div>
  );
};

export default Navbar;
```
```js
// MainLayout.jsx file
import React from "react";
import { Outlet } from "react-router-dom";
import Navbar from "./Navbar";

const MainLayout = () => {
  return (
    <>
      <Navbar />
      <Outlet />
    </>
  );
};

export default MainLayout;
```
**Step-07:**
In this step we will fetch the data in the **Products.jsx** file. Here I am going to use [Fake Store Api](https://fakestoreapi.com)

```js
import React from "react";
import { useLoaderData } from "react-router-dom";

const Products = () => {
  let data = useLoaderData();
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        flexWrap: " wrap",
        columnGap: "20px",
      }}
    >
      {data && data.length > 0 ? (
        data.map((product) => (
          <div style={{ width: "350px", padding: "15px" }}>
            <h3 style={{ color: "#181818", paddingBottom: "5px" }}>
              {product.title}
            </h3>
            <div style={{ width: "300px", height: "300px" }}>
              <img
                style={{ width: "100%", height: "100%" }}
                src={product.image}
                alt=""
              />
            </div>
            <h2 style={{ color: "brown", paddingTop: "5px" }}>
              Price: {product.price} BDT
            </h2>
          </div>
        ))
      ) : (
        <h1>No Data Found</h1>
      )}
    </div>
  );
};

export default Products;

export const productsData = async () => {
  let url = "https://fakestoreapi.com/products";
  let response = await fetch(url);
  return response.json();
};
```
**Step-08:** 
Create Routes in the **main.jsx** file

```js
import React from "react";
import ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";
import MainLayout from "./layouts/MainLayout";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";
import Products, { productsData } from "./pages/Products";
import Contact from "./pages/Contact";
import "./index.css";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<MainLayout />} errorElement={<NotFound />}>
      <Route path="" element={<Home />} />
      <Route path="products" element={<Products />} loader={productsData} />
      <Route path="contact" element={<Contact />} />
    </Route>
  )
);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

```

## Demonstration Video
[Demonstration Youtube Video](https://youtu.be/ABkgdPkqVf0)