I'M NOT FINISHED WITH THIS.

src/routes/__root.tsx

@@ -23,6 +23,14 @@ export const Route = createRootRoute({
     }]
   }),
   component: RootLayout,
+  notFoundComponent: () => {
+    return (
+      <main id="error-page">
+        <h1>404</h1>
+        <p>The requested page could not be found.</p>
+      </main>
+    );
+  }
 });
 
 function RootLayout() {

src/routes/_sidebar.tsx

@@ -13,12 +13,19 @@ export const Route = createFileRoute('/_sidebar')({
 });
 
 function Sidebar() {
-  const cazzo = Route.useLoaderData();
-  if (cazzo === undefined) {
+  const loaderData = Route.useLoaderData();
+  if (loaderData === undefined) {
     console.log("SIDEBAR ERROR!?");
-    return <div>CANE DIO SIDEBAR MORTE</div>;
+    return (
+      <>
+        <div id="sidebar">UNDEFINED LOADER DATA IN SIDEBAR</div>
+        <div id={'detail'}>
+          <Outlet/>
+        </div>
+      </>
+    );
   }
-  const { contacts } = cazzo;
+  const { contacts } = loaderData;
 
   return (
     <>

src/routes/_sidebar/contacts.$contactId.tsx

@@ -15,12 +15,6 @@ export const Route = createFileRoute('/_sidebar/contacts/$contactId')({
 
 function Contact() {
   const { contact } = Route.useLoaderData();
-  if (contact === undefined) {
-    console.log("CANE");
-    return <div>PORCODIO</div>;
-  }
-  console.log("CANEDIO");
-  console.log(contact);
 
   return (
     <div id="contact">