Dynamic Routes Fetch API Data in React js 2025
Dynamic Routes + Fetch API in React JS (2025)
React Router lets you handle dynamic routes like /user/:id and fetch data based on the parameter (e.g., user ID).
🛠️ Step 1: Define Dynamic Route
// App.jsx or Routes.jsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import UserPage from "./pages/UserPage";
function App() {
return (
);
}
📥 Step 2: Get the Dynamic Param & Fetch Data
// pages/UserPage.jsx
import { useParams, useEffect, useState } from "react";
export default function UserPage() {
const { id } = useParams();
const [user, setUser] = useState(null);
useEffect(() => {
fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
.then(res => res.json())
.then(data => setUser(data));
}, [id]);
if (!user) return Loading...
;
return (
{user.name}
Email: {user.email}
Phone: {user.phone}
);
}
🧪 Test the Route
Visit /user/1 or /user/5 in the browser to see data fetched dynamically.
💡 Bonus Tip
Always handle loading and error states in real-world apps.