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: '/'
-  id: '__root__' | '/'
+  to: '/' | '/contacts/$contractId'
+  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,10 +1,40 @@
-import { Outlet, createRootRoute } from '@tanstack/react-router';
+import { Outlet, createRootRoute, Link } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
 
 export const Route = createRootRoute({
   component: () => (
     <>
-      <Outlet/>
+      <div id="sidebar">
+        <h1>React Router Contacts</h1>
+        <div>
+          <form id="search-form" role="search">
+            <input
+              aria-label="Search contacts"
+              id="q"
+              name="q"
+              placeholder="Search"
+              type="search"
+            />
+            <div aria-hidden hidden={true} id="search-spinner"/>
+          </form>
+          <form method="post">
+            <button type="submit">New</button>
+          </form>
+        </div>
+        <nav>
+          <ul>
+            <li>
+              <Link to="/contacts/$contractId" params={{ contractId: '1' }}>Your Name</Link>
+            </li>
+            <li>
+              <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>
+  );
+}

src/routes/index.tsx

@@ -7,35 +7,6 @@ export const Route = createFileRoute('/')({
 
 function App() {
   return (
-    <>
-      <div id="sidebar">
-        <h1>React Router Contacts</h1>
-        <div>
-          <form id="search-form" role="search">
-            <input
-              aria-label="Search contacts"
-              id="q"
-              name="q"
-              placeholder="Search"
-              type="search"
-            />
-            <div aria-hidden hidden={true} id="search-spinner"/>
-          </form>
-          <form method="post">
-            <button type="submit">New</button>
-          </form>
-        </div>
-        <nav>
-          <ul>
-            <li>
-              <a href={`/contacts/1`}>Your Name</a>
-            </li>
-            <li>
-              <a href={`/contacts/2`}>Your Friend</a>
-            </li>
-          </ul>
-        </nav>
-      </div>
-    </>
+    <div></div>
   );
 }