Redirect to 404 page if user not found

src/pages/VolunteerProfile/VolunteerProfilePage.jsx

@@ -4,20 +4,28 @@ import { useEffect, useState } from "react";
 import getUserById from "../../utils/users/getUserById.js";
 import formatDate from "../../utils/date/formatDate.js";
 import Task from "../../components/Task/Task.jsx";
+import { useNavigate } from "react-router";
 
 export default function VolunteerProfilePage() {
 
     const params = useParams();
     const id = params.id;
 
+    const navigate = useNavigate();
+
     const [user, setUser] = useState({});
 
     useEffect(() => {
         (async () => {
-            const data = await getUserById(id);
+            const result = await getUserById(id);
-            setUser(data);
+            if (result?.error === 'not_found') {
-        }) ()
+                navigate("/404");
-    }, []);
+            } else {
+                setUser(result);
+            }
+        })();
+    }, [id]);
+
 
 
     return <div className={styles.container}>

src/router.js

@@ -28,6 +28,10 @@ const router = createBrowserRouter([
         path: "/*",
         Component: PageNotFound,
     },
+    {
+        path: "/404",
+        Component: PageNotFound,
+    },
     {
         path: "/",
         Component: Layout,

src/utils/users/getUserById.js

@@ -1,4 +1,4 @@
-export default async function getUserById (id) {
+export default async function getUserById(id) {
     try {
         const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/${id}`, {
             method: 'GET',
@@ -9,12 +9,15 @@ export default async function getUserById (id) {
         });
 
         if (!res.ok) {
+            if (res.status === 404) {
+                return { error: 'not_found' };
+            }
             throw new Error(`Erreur serveur : ${res.status}`);
         }
 
         return await res.json();
     } catch (err) {
         console.error('Erreur :', err);
-        return null;
+        return { error: 'server_error' };
     }
-}
+}