Complete to "Client Side Routing"

src/routeTree.gen.ts

@@ -12,6 +12,7 @@
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as IndexImport } from './routes/index'
+import { Route as ContactsContractIdImport } from './routes/contacts.$contractId'
 
 // Create/Update Routes
 
@@ -21,6 +22,12 @@ const IndexRoute = IndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const ContactsContractIdRoute = ContactsContractIdImport.update({
+  id: '/contacts/$contractId',
+  path: '/contacts/$contractId',
+  getParentRoute: () => rootRoute,
+} as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -32,6 +39,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
+    '/contacts/$contractId': {
+      id: '/contacts/$contractId'
+      path: '/contacts/$contractId'
+      fullPath: '/contacts/$contractId'
+      preLoaderRoute: typeof ContactsContractIdImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
@@ -39,32 +53,37 @@ declare module '@tanstack/react-router' {
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/contacts/$contractId': typeof ContactsContractIdRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/contacts/$contractId': typeof ContactsContractIdRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
+  '/contacts/$contractId': typeof ContactsContractIdRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
+  fullPaths: '/' | '/contacts/$contractId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/'
+  to: '/' | '/contacts/$contractId'
-  id: '__root__' | '/'
+  id: '__root__' | '/' | '/contacts/$contractId'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  ContactsContractIdRoute: typeof ContactsContractIdRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  ContactsContractIdRoute: ContactsContractIdRoute,
 }
 
 export const routeTree = rootRoute
@@ -77,11 +96,15 @@ export const routeTree = rootRoute
     "__root__": {
       "filePath": "__root.tsx",
       "children": [
-        "/"
+        "/",
+        "/contacts/$contractId"
       ]
     },
     "/": {
       "filePath": "index.tsx"
+    },
+    "/contacts/$contractId": {
+      "filePath": "contacts.$contractId.tsx"
     }
   }
 }

src/routes/__root.tsx

@@ -1,4 +1,4 @@
-import { createRootRoute } from '@tanstack/react-router';
+import { Outlet, createRootRoute, Link } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
 
 export const Route = createRootRoute({
@@ -24,14 +24,17 @@ export const Route = createRootRoute({
         <nav>
           <ul>
             <li>
-              <a href={`/contacts/1`}>Your Name</a>
+              <Link to="/contacts/$contractId" params={{ contractId: '1' }}>Your Name</Link>
             </li>
             <li>
-              <a href={`/contacts/2`}>Your Friend</a>
+              <Link to="/contacts/$contractId" params={{ contractId: '2' }}>Your Friend</Link>
             </li>
           </ul>
         </nav>
       </div>
+      <div id={'detail'}>
+        <Outlet/>
+      </div>
       <TanStackRouterDevtools/>
     </>
   ),

src/routes/contacts.$contractId.tsx

@@ -0,0 +1,101 @@
+import { createFileRoute } from '@tanstack/react-router';
+import type { ContactRecord } from "@/data.ts";
+
+export const Route = createFileRoute('/contacts/$contractId')({
+  component: Contact,
+});
+
+function Contact() {
+  const contact = {
+    first: "Your",
+    last: "Name",
+    avatar: "https://placecats.com/200/200",
+    twitter: "your_handle",
+    notes: "Some notes",
+    favorite: true,
+  };
+
+  return (
+    <div id="contact">
+      <div>
+        <img
+          alt={`${contact.first} ${contact.last} avatar`}
+          key={contact.avatar}
+          src={contact.avatar}
+        />
+      </div>
+
+      <div>
+        <h1>
+          {contact.first || contact.last ? (
+            <>
+              {contact.first} {contact.last}
+            </>
+          ) : (
+            <i>No Name</i>
+          )}
+          <Favorite contact={contact}/>
+        </h1>
+
+        {contact.twitter ? (
+          <p>
+            <a
+              href={`https://twitter.com/${contact.twitter}`}
+            >
+              {contact.twitter}
+            </a>
+          </p>
+        ) : null}
+
+        {contact.notes ? <p>{contact.notes}</p> : null}
+
+        <div>
+          <form action="edit">
+            <button type="submit">Edit</button>
+          </form>
+
+          <form
+            action="destroy"
+            method="post"
+            onSubmit={(event) => {
+              const response = confirm(
+                "Please confirm you want to delete this record."
+              );
+              if (!response) {
+                event.preventDefault();
+              }
+            }}
+          >
+            <button type="submit">Delete</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Favorite(
+  {
+    contact,
+  }: {
+    contact: Pick<ContactRecord, "favorite">;
+  }
+) {
+  const favorite = contact.favorite;
+
+  return (
+    <form method="post">
+      <button
+        aria-label={
+          favorite
+            ? "Remove from favorites"
+            : "Add to favorites"
+        }
+        name="favorite"
+        value={favorite ? "false" : "true"}
+      >
+        {favorite ? "★" : "☆"}
+      </button>
+    </form>
+  );
+}