Fetch Data Using React Router Dom v6

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

touch Home.jsx Contact.jsx Products.jsx

Step-04:
Install react-router dom

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

mkdir layouts
touch MainLayout.jsx Navbar.jsx

Step-06:
Here we will edit the MainLayout and Navbar files

// 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;

// 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

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

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