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)