SURRENDER...

src/routeTree.gen.ts

@@ -14,7 +14,8 @@ import { Route as rootRoute } from './routes/__root'
 import { Route as AboutImport } from './routes/about'
 import { Route as SidebarImport } from './routes/_sidebar'
 import { Route as SidebarIndexImport } from './routes/_sidebar/index'
-import { Route as SidebarContactsContractIdImport } from './routes/_sidebar/contacts.$contractId'
+import { Route as SidebarContactsImport } from './routes/_sidebar/contacts'
+import { Route as SidebarContactsContactIdImport } from './routes/_sidebar/contacts.$contactId'
 
 // Create/Update Routes
 
@@ -35,12 +36,18 @@ const SidebarIndexRoute = SidebarIndexImport.update({
   getParentRoute: () => SidebarRoute,
 } as any)
 
-const SidebarContactsContractIdRoute = SidebarContactsContractIdImport.update({
+const SidebarContactsRoute = SidebarContactsImport.update({
-  id: '/contacts/$contractId',
+  id: '/contacts',
-  path: '/contacts/$contractId',
+  path: '/contacts',
   getParentRoute: () => SidebarRoute,
 } as any)
 
+const SidebarContactsContactIdRoute = SidebarContactsContactIdImport.update({
+  id: '/$contactId',
+  path: '/$contactId',
+  getParentRoute: () => SidebarContactsRoute,
+} as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -59,6 +66,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AboutImport
       parentRoute: typeof rootRoute
     }
+    '/_sidebar/contacts': {
+      id: '/_sidebar/contacts'
+      path: '/contacts'
+      fullPath: '/contacts'
+      preLoaderRoute: typeof SidebarContactsImport
+      parentRoute: typeof SidebarImport
+    }
     '/_sidebar/': {
       id: '/_sidebar/'
       path: '/'
@@ -66,26 +80,38 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SidebarIndexImport
       parentRoute: typeof SidebarImport
     }
-    '/_sidebar/contacts/$contractId': {
+    '/_sidebar/contacts/$contactId': {
-      id: '/_sidebar/contacts/$contractId'
+      id: '/_sidebar/contacts/$contactId'
-      path: '/contacts/$contractId'
+      path: '/$contactId'
-      fullPath: '/contacts/$contractId'
+      fullPath: '/contacts/$contactId'
-      preLoaderRoute: typeof SidebarContactsContractIdImport
+      preLoaderRoute: typeof SidebarContactsContactIdImport
-      parentRoute: typeof SidebarImport
+      parentRoute: typeof SidebarContactsImport
     }
   }
 }
 
 // Create and export the route tree
 
+interface SidebarContactsRouteChildren {
+  SidebarContactsContactIdRoute: typeof SidebarContactsContactIdRoute
+}
+
+const SidebarContactsRouteChildren: SidebarContactsRouteChildren = {
+  SidebarContactsContactIdRoute: SidebarContactsContactIdRoute,
+}
+
+const SidebarContactsRouteWithChildren = SidebarContactsRoute._addFileChildren(
+  SidebarContactsRouteChildren,
+)
+
 interface SidebarRouteChildren {
+  SidebarContactsRoute: typeof SidebarContactsRouteWithChildren
   SidebarIndexRoute: typeof SidebarIndexRoute
-  SidebarContactsContractIdRoute: typeof SidebarContactsContractIdRoute
 }
 
 const SidebarRouteChildren: SidebarRouteChildren = {
+  SidebarContactsRoute: SidebarContactsRouteWithChildren,
   SidebarIndexRoute: SidebarIndexRoute,
-  SidebarContactsContractIdRoute: SidebarContactsContractIdRoute,
 }
 
 const SidebarRouteWithChildren =
@@ -94,35 +120,39 @@ const SidebarRouteWithChildren =
 export interface FileRoutesByFullPath {
   '': typeof SidebarRouteWithChildren
   '/about': typeof AboutRoute
+  '/contacts': typeof SidebarContactsRouteWithChildren
   '/': typeof SidebarIndexRoute
-  '/contacts/$contractId': typeof SidebarContactsContractIdRoute
+  '/contacts/$contactId': typeof SidebarContactsContactIdRoute
 }
 
 export interface FileRoutesByTo {
   '/about': typeof AboutRoute
+  '/contacts': typeof SidebarContactsRouteWithChildren
   '/': typeof SidebarIndexRoute
-  '/contacts/$contractId': typeof SidebarContactsContractIdRoute
+  '/contacts/$contactId': typeof SidebarContactsContactIdRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/_sidebar': typeof SidebarRouteWithChildren
   '/about': typeof AboutRoute
+  '/_sidebar/contacts': typeof SidebarContactsRouteWithChildren
   '/_sidebar/': typeof SidebarIndexRoute
-  '/_sidebar/contacts/$contractId': typeof SidebarContactsContractIdRoute
+  '/_sidebar/contacts/$contactId': typeof SidebarContactsContactIdRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '' | '/about' | '/' | '/contacts/$contractId'
+  fullPaths: '' | '/about' | '/contacts' | '/' | '/contacts/$contactId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/about' | '/' | '/contacts/$contractId'
+  to: '/about' | '/contacts' | '/' | '/contacts/$contactId'
   id:
     | '__root__'
     | '/_sidebar'
     | '/about'
+    | '/_sidebar/contacts'
     | '/_sidebar/'
-    | '/_sidebar/contacts/$contractId'
+    | '/_sidebar/contacts/$contactId'
   fileRoutesById: FileRoutesById
 }
 
@@ -153,20 +183,27 @@ export const routeTree = rootRoute
     "/_sidebar": {
       "filePath": "_sidebar.tsx",
       "children": [
-        "/_sidebar/",
+        "/_sidebar/contacts",
-        "/_sidebar/contacts/$contractId"
+        "/_sidebar/"
       ]
     },
     "/about": {
       "filePath": "about.tsx"
     },
+    "/_sidebar/contacts": {
+      "filePath": "_sidebar/contacts.tsx",
+      "parent": "/_sidebar",
+      "children": [
+        "/_sidebar/contacts/$contactId"
+      ]
+    },
     "/_sidebar/": {
       "filePath": "_sidebar/index.tsx",
       "parent": "/_sidebar"
     },
-    "/_sidebar/contacts/$contractId": {
+    "/_sidebar/contacts/$contactId": {
-      "filePath": "_sidebar/contacts.$contractId.tsx",
+      "filePath": "_sidebar/contacts.$contactId.tsx",
-      "parent": "/_sidebar"
+      "parent": "/_sidebar/contacts"
     }
   }
 }

src/routes/__root.tsx

@@ -23,7 +23,6 @@ export const Route = createRootRoute({
     }]
   }),
   component: RootLayout,
-  notFoundComponent: NotFoundComponent,
 });
 
 function RootLayout() {
@@ -48,12 +47,3 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
     </html>
   );
 }
-
-function NotFoundComponent() {
-  return (
-    <main id="error-page">
-      <h1>404</h1>
-      <p>The requested page could not be found.</p>
-    </main>
-  );
-}

src/routes/_sidebar.tsx

@@ -9,10 +9,16 @@ async function fetchContacts() {
 export const Route = createFileRoute('/_sidebar')({
   component: Sidebar,
   loader: fetchContacts,
+  notFoundComponent: () => <div>Not Found</div>,
 });
 
 function Sidebar() {
-  const { contacts } = Route.useLoaderData();
+  const cazzo = Route.useLoaderData();
+  if (cazzo === undefined) {
+    console.log("SIDEBAR ERROR!?");
+    return <div>CANE DIO SIDEBAR MORTE</div>;
+  }
+  const { contacts } = cazzo;
 
   return (
     <>
@@ -40,7 +46,7 @@ function Sidebar() {
             <ul>
               {contacts.map((contact) => (
                 <li key={contact.id}>
-                  <Link to="/contacts/$contractId" params={{ contractId: contact.id }}>
+                  <Link to="/contacts/$contactId" params={{ contactId: contact.id }}>
                     {contact.first || contact.last ? (
                       <>
                         {contact.first} {contact.last}

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

@@ -1,19 +1,26 @@
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, notFound } from '@tanstack/react-router';
-import type { ContactRecord } from "@/data.ts";
+import { type ContactRecord, getContact } from "@/data.ts";
 
-export const Route = createFileRoute('/_sidebar/contacts/$contractId')({
+export const Route = createFileRoute('/_sidebar/contacts/$contactId')({
+  loader: async ({ params }) => {
+    const contact = await getContact(params.contactId);
+    if (contact === null) throw notFound();
+    return { contact };
+  },
   component: Contact,
+  notFoundComponent: () => {
+    return <p>Post not found!</p>;
+  },
 });
 
 function Contact() {
-  const contact = {
+  const { contact } = Route.useLoaderData();
-    first: "Your",
+  if (contact === undefined) {
-    last: "Name",
+    console.log("CANE");
-    avatar: "https://placecats.com/200/200",
+    return <div>PORCODIO</div>;
-    twitter: "your_handle",
+  }
-    notes: "Some notes",
+  console.log("CANEDIO");
-    favorite: true,
+  console.log(contact);
-  };
 
   return (
     <div id="contact">

src/routes/_sidebar/contacts.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute, Outlet } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_sidebar/contacts')({
+  component: RouteComponent,
+  notFoundComponent: NotFoundContact,
+});
+
+function RouteComponent() {
+  return <Outlet/>;
+}
+
+function NotFoundContact() {
+  return (
+    <main id="error-page">
+      <h1>404</h1>
+      <p>The requested page could not be found.</p>
+    </main>
+  );
+}