DEV Community

Cover image for Fetch Data Using React Router Dom v6
Khaled Md Saifullah
Khaled Md Saifullah

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Step-04:
Install react-router dom

npm install react-router-dom
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode
// 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;
Enter fullscreen mode Exit fullscreen mode

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();
};
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Demonstration Video

Demonstration Youtube Video

Top comments (0)