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> ); 
Top comments (0)