From 037c241c8c9d4e20ce7f654b7c4afbc1cb421369 Mon Sep 17 00:00:00 2001
From: Alexander Karan <tech@alexanderkaran.com>
Date: Sun, 14 Jun 2026 20:30:26 +0800
Subject: [PATCH] Moved INP tests to use path params

---
 .../app-astro/src/components/SpaDetail.tsx    |  3 +-
 packages/app-astro/src/components/SpaPage.tsx |  2 +-
 packages/app-astro/src/pages/mpa.astro        |  2 +-
 .../pages/mpa/{detail.astro => [id].astro}    |  2 +-
 .../pages/spa/{detail.astro => [id].astro}    |  4 +-
 packages/app-next-js/app/mpa/[id]/page.tsx    |  9 +++
 packages/app-next-js/app/mpa/detail/page.tsx  |  9 ---
 packages/app-next-js/app/mpa/page.tsx         |  2 +-
 packages/app-next-js/app/spa/SpaTable.tsx     |  2 +-
 packages/app-next-js/app/spa/[id]/page.tsx    |  9 +++
 packages/app-next-js/app/spa/detail/page.tsx  | 19 ------
 .../app/pages/mpa/{detail.vue => [id].vue}    |  2 +-
 packages/app-nuxt/app/pages/mpa/index.vue     |  2 +-
 .../app/pages/spa/{detail.vue => [id].vue}    |  2 +-
 packages/app-nuxt/app/pages/spa/index.vue     |  2 +-
 packages/app-react-router/app/routes.ts       |  4 +-
 .../app/routes/mpa.detail.tsx                 |  5 +-
 packages/app-react-router/app/routes/mpa.tsx  |  2 +-
 .../app/routes/spa.detail.tsx                 |  5 +-
 packages/app-react-router/app/routes/spa.tsx  |  2 +-
 .../app-solid-start/src/routes/mpa/[id].tsx   |  7 +++
 .../app-solid-start/src/routes/mpa/detail.tsx |  7 ---
 .../app-solid-start/src/routes/mpa/index.tsx  |  2 +-
 .../app-solid-start/src/routes/spa/[id].tsx   |  9 +++
 .../app-solid-start/src/routes/spa/detail.tsx |  9 ---
 .../app-solid-start/src/routes/spa/index.tsx  |  2 +-
 .../app-sveltekit/src/routes/mpa/+page.svelte |  2 +-
 .../src/routes/mpa/[id]/+page.server.ts       |  5 ++
 .../routes/mpa/{detail => [id]}/+page.svelte  |  0
 .../src/routes/mpa/{detail => [id]}/+page.ts  |  0
 .../src/routes/mpa/detail/+page.server.ts     |  6 --
 .../app-sveltekit/src/routes/spa/+page.svelte |  2 +-
 .../routes/spa/{detail => [id]}/+page.svelte  |  2 +-
 .../src/routes/spa/{detail => [id]}/+page.ts  |  0
 .../src/routeTree.gen.ts                      | 62 +++++++++----------
 .../src/routes/mpa.tsx                        |  2 +-
 .../src/routes/mpa_.$id.tsx                   | 11 ++++
 .../src/routes/mpa_.detail.tsx                | 14 -----
 .../src/routes/spa.tsx                        |  2 +-
 .../src/routes/spa_.$id.tsx                   | 11 ++++
 .../src/routes/spa_.detail.tsx                | 14 -----
 41 files changed, 120 insertions(+), 138 deletions(-)
 rename packages/app-astro/src/pages/mpa/{detail.astro => [id].astro} (83%)
 rename packages/app-astro/src/pages/spa/{detail.astro => [id].astro} (76%)
 create mode 100644 packages/app-next-js/app/mpa/[id]/page.tsx
 delete mode 100644 packages/app-next-js/app/mpa/detail/page.tsx
 create mode 100644 packages/app-next-js/app/spa/[id]/page.tsx
 delete mode 100644 packages/app-next-js/app/spa/detail/page.tsx
 rename packages/app-nuxt/app/pages/mpa/{detail.vue => [id].vue} (59%)
 rename packages/app-nuxt/app/pages/spa/{detail.vue => [id].vue} (64%)
 create mode 100644 packages/app-solid-start/src/routes/mpa/[id].tsx
 delete mode 100644 packages/app-solid-start/src/routes/mpa/detail.tsx
 create mode 100644 packages/app-solid-start/src/routes/spa/[id].tsx
 delete mode 100644 packages/app-solid-start/src/routes/spa/detail.tsx
 create mode 100644 packages/app-sveltekit/src/routes/mpa/[id]/+page.server.ts
 rename packages/app-sveltekit/src/routes/mpa/{detail => [id]}/+page.svelte (100%)
 rename packages/app-sveltekit/src/routes/mpa/{detail => [id]}/+page.ts (100%)
 delete mode 100644 packages/app-sveltekit/src/routes/mpa/detail/+page.server.ts
 rename packages/app-sveltekit/src/routes/spa/{detail => [id]}/+page.svelte (67%)
 rename packages/app-sveltekit/src/routes/spa/{detail => [id]}/+page.ts (100%)
 create mode 100644 packages/app-tanstack-start-react/src/routes/mpa_.$id.tsx
 delete mode 100644 packages/app-tanstack-start-react/src/routes/mpa_.detail.tsx
 create mode 100644 packages/app-tanstack-start-react/src/routes/spa_.$id.tsx
 delete mode 100644 packages/app-tanstack-start-react/src/routes/spa_.detail.tsx

diff --git a/packages/app-astro/src/components/SpaDetail.tsx b/packages/app-astro/src/components/SpaDetail.tsx
index b2d9ffb4..252b211d 100644
--- a/packages/app-astro/src/components/SpaDetail.tsx
+++ b/packages/app-astro/src/components/SpaDetail.tsx
@@ -1,4 +1,3 @@
-export default function SpaDetail() {
-  const id = new URLSearchParams(window.location.search).get('id')
+export default function SpaDetail({ id }: { id?: string }) {
   return <p id="detail-id">{id}</p>
 }
diff --git a/packages/app-astro/src/components/SpaPage.tsx b/packages/app-astro/src/components/SpaPage.tsx
index 544ec925..abb7a384 100644
--- a/packages/app-astro/src/components/SpaPage.tsx
+++ b/packages/app-astro/src/components/SpaPage.tsx
@@ -20,7 +20,7 @@ export default function SpaPage() {
             <td>{entry.id}</td>
             <td>{entry.name}</td>
             <td>
-              <a href={`/spa/detail?id=${entry.id}`}>View →</a>
+              <a href={`/spa/${entry.id}`}>View →</a>
             </td>
           </tr>
         ))}
diff --git a/packages/app-astro/src/pages/mpa.astro b/packages/app-astro/src/pages/mpa.astro
index e5415e42..1fc1a560 100644
--- a/packages/app-astro/src/pages/mpa.astro
+++ b/packages/app-astro/src/pages/mpa.astro
@@ -18,7 +18,7 @@ const entries = await testData()
               <td>{entry.id}</td>
               <td>{entry.name}</td>
               <td>
-                <a href={`/mpa/detail?id=${entry.id}`}>View →</a>
+                <a href={`/mpa/${entry.id}`}>View →</a>
               </td>
             </tr>
           ))
diff --git a/packages/app-astro/src/pages/mpa/detail.astro b/packages/app-astro/src/pages/mpa/[id].astro
similarity index 83%
rename from packages/app-astro/src/pages/mpa/detail.astro
rename to packages/app-astro/src/pages/mpa/[id].astro
index 8a641604..0ad006fd 100644
--- a/packages/app-astro/src/pages/mpa/detail.astro
+++ b/packages/app-astro/src/pages/mpa/[id].astro
@@ -1,5 +1,5 @@
 ---
-const id = Astro.url.searchParams.get('id')
+const { id } = Astro.params
 ---
 
 <html lang="en">
diff --git a/packages/app-astro/src/pages/spa/detail.astro b/packages/app-astro/src/pages/spa/[id].astro
similarity index 76%
rename from packages/app-astro/src/pages/spa/detail.astro
rename to packages/app-astro/src/pages/spa/[id].astro
index 86109fe7..f9728796 100644
--- a/packages/app-astro/src/pages/spa/detail.astro
+++ b/packages/app-astro/src/pages/spa/[id].astro
@@ -1,5 +1,7 @@
 ---
 import SpaDetail from '../../components/SpaDetail'
+
+const { id } = Astro.params
 ---
 
 <html lang="en">
@@ -9,6 +11,6 @@ import SpaDetail from '../../components/SpaDetail'
     <title>Astro SPA Detail</title>
   </head>
   <body>
-    <SpaDetail client:only="react" />
+    <SpaDetail client:only="react" id={id} />
   </body>
 </html>
diff --git a/packages/app-next-js/app/mpa/[id]/page.tsx b/packages/app-next-js/app/mpa/[id]/page.tsx
new file mode 100644
index 00000000..54795502
--- /dev/null
+++ b/packages/app-next-js/app/mpa/[id]/page.tsx
@@ -0,0 +1,9 @@
+interface Props {
+  params: Promise<{ id: string }>
+}
+
+export default async function MpaDetailPage({ params }: Props) {
+  const { id } = await params
+
+  return <p id="detail-id">{id}</p>
+}
diff --git a/packages/app-next-js/app/mpa/detail/page.tsx b/packages/app-next-js/app/mpa/detail/page.tsx
deleted file mode 100644
index 3d6b31e7..00000000
--- a/packages/app-next-js/app/mpa/detail/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-interface Props {
-  searchParams: Promise<{ id?: string }>
-}
-
-export default async function MpaDetailPage({ searchParams }: Props) {
-  const { id } = await searchParams
-
-  return <p id="detail-id">{id}</p>
-}
diff --git a/packages/app-next-js/app/mpa/page.tsx b/packages/app-next-js/app/mpa/page.tsx
index 2f38d6ab..ab79fede 100644
--- a/packages/app-next-js/app/mpa/page.tsx
+++ b/packages/app-next-js/app/mpa/page.tsx
@@ -13,7 +13,7 @@ export default async function MpaPage() {
             <td>{entry.id}</td>
             <td>{entry.name}</td>
             <td>
-              <a href={`/mpa/detail?id=${entry.id}`}>View →</a>
+              <a href={`/mpa/${entry.id}`}>View →</a>
             </td>
           </tr>
         ))}
diff --git a/packages/app-next-js/app/spa/SpaTable.tsx b/packages/app-next-js/app/spa/SpaTable.tsx
index 32274dbb..6ad220a1 100644
--- a/packages/app-next-js/app/spa/SpaTable.tsx
+++ b/packages/app-next-js/app/spa/SpaTable.tsx
@@ -23,7 +23,7 @@ export default function SpaTable() {
             <td>{entry.id}</td>
             <td>{entry.name}</td>
             <td>
-              <Link href={`/spa/detail?id=${entry.id}`}>View →</Link>
+              <Link href={`/spa/${entry.id}`}>View →</Link>
             </td>
           </tr>
         ))}
diff --git a/packages/app-next-js/app/spa/[id]/page.tsx b/packages/app-next-js/app/spa/[id]/page.tsx
new file mode 100644
index 00000000..807c02a4
--- /dev/null
+++ b/packages/app-next-js/app/spa/[id]/page.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import { useParams } from 'next/navigation'
+
+export default function SpaDetailPage() {
+  const params = useParams<{ id: string }>()
+
+  return <p id="detail-id">{params.id}</p>
+}
diff --git a/packages/app-next-js/app/spa/detail/page.tsx b/packages/app-next-js/app/spa/detail/page.tsx
deleted file mode 100644
index 4ce252af..00000000
--- a/packages/app-next-js/app/spa/detail/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client'
-
-import { Suspense } from 'react'
-import { useSearchParams } from 'next/navigation'
-
-function DetailContent() {
-  const searchParams = useSearchParams()
-  const id = searchParams.get('id')
-
-  return <p id="detail-id">{id}</p>
-}
-
-export default function SpaDetailPage() {
-  return (
-    <Suspense>
-      <DetailContent />
-    </Suspense>
-  )
-}
diff --git a/packages/app-nuxt/app/pages/mpa/detail.vue b/packages/app-nuxt/app/pages/mpa/[id].vue
similarity index 59%
rename from packages/app-nuxt/app/pages/mpa/detail.vue
rename to packages/app-nuxt/app/pages/mpa/[id].vue
index c68de24a..83db4141 100644
--- a/packages/app-nuxt/app/pages/mpa/detail.vue
+++ b/packages/app-nuxt/app/pages/mpa/[id].vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const route = useRoute()
-const id = Array.isArray(route.query.id) ? route.query.id[0] : route.query.id
+const id = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
 </script>
 
 <template>
diff --git a/packages/app-nuxt/app/pages/mpa/index.vue b/packages/app-nuxt/app/pages/mpa/index.vue
index a5b946ae..2fd1b2df 100644
--- a/packages/app-nuxt/app/pages/mpa/index.vue
+++ b/packages/app-nuxt/app/pages/mpa/index.vue
@@ -11,7 +11,7 @@ const { data } = await useAsyncData(() => testData(), { deep: false })
         <td>{{ entry.id }}</td>
         <td>{{ entry.name }}</td>
         <td>
-          <a :href="`/mpa/detail?id=${entry.id}`">View →</a>
+          <a :href="`/mpa/${entry.id}`">View →</a>
         </td>
       </tr>
     </tbody>
diff --git a/packages/app-nuxt/app/pages/spa/detail.vue b/packages/app-nuxt/app/pages/spa/[id].vue
similarity index 64%
rename from packages/app-nuxt/app/pages/spa/detail.vue
rename to packages/app-nuxt/app/pages/spa/[id].vue
index 0db002c7..fcf5d758 100644
--- a/packages/app-nuxt/app/pages/spa/detail.vue
+++ b/packages/app-nuxt/app/pages/spa/[id].vue
@@ -2,7 +2,7 @@
 definePageMeta({ ssr: false })
 
 const route = useRoute()
-const id = Array.isArray(route.query.id) ? route.query.id[0] : route.query.id
+const id = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
 </script>
 
 <template>
diff --git a/packages/app-nuxt/app/pages/spa/index.vue b/packages/app-nuxt/app/pages/spa/index.vue
index 54882d0b..0f15e260 100644
--- a/packages/app-nuxt/app/pages/spa/index.vue
+++ b/packages/app-nuxt/app/pages/spa/index.vue
@@ -16,7 +16,7 @@ const entries: Entry[] = Array.from({ length: 1000 }, () => ({
         <td>{{ entry.id }}</td>
         <td>{{ entry.name }}</td>
         <td>
-          <NuxtLink :to="`/spa/detail?id=${entry.id}`">View →</NuxtLink>
+          <NuxtLink :to="`/spa/${entry.id}`">View →</NuxtLink>
         </td>
       </tr>
     </tbody>
diff --git a/packages/app-react-router/app/routes.ts b/packages/app-react-router/app/routes.ts
index b42b4611..49464a81 100644
--- a/packages/app-react-router/app/routes.ts
+++ b/packages/app-react-router/app/routes.ts
@@ -5,11 +5,11 @@ const isSpa = process.env.BUILD_MODE === 'spa'
 export default [
   ...(isSpa ? [] : [index('routes/home.tsx')]),
   route('/spa', 'routes/spa.tsx'),
-  route('/spa/detail', 'routes/spa.detail.tsx'),
+  route('/spa/:id', 'routes/spa.detail.tsx'),
   ...(isSpa
     ? []
     : [
         route('/mpa', 'routes/mpa.tsx'),
-        route('/mpa/detail', 'routes/mpa.detail.tsx'),
+        route('/mpa/:id', 'routes/mpa.detail.tsx'),
       ]),
 ] satisfies RouteConfig
diff --git a/packages/app-react-router/app/routes/mpa.detail.tsx b/packages/app-react-router/app/routes/mpa.detail.tsx
index 3af22cf8..f56f0119 100644
--- a/packages/app-react-router/app/routes/mpa.detail.tsx
+++ b/packages/app-react-router/app/routes/mpa.detail.tsx
@@ -1,8 +1,7 @@
 import type { Route } from './+types/mpa.detail'
 
-export async function loader({ request }: Route.LoaderArgs) {
-  const url = new URL(request.url)
-  const id = url.searchParams.get('id')
+export async function loader({ params }: Route.LoaderArgs) {
+  const id = params.id
   return { id }
 }
 
diff --git a/packages/app-react-router/app/routes/mpa.tsx b/packages/app-react-router/app/routes/mpa.tsx
index bed4d090..ffe2f0c9 100644
--- a/packages/app-react-router/app/routes/mpa.tsx
+++ b/packages/app-react-router/app/routes/mpa.tsx
@@ -15,7 +15,7 @@ export default function MpaPage({ loaderData }: Route.ComponentProps) {
             <td>{entry.id}</td>
             <td>{entry.name}</td>
             <td>
-              <a href={`/mpa/detail?id=${entry.id}`}>View →</a>
+              <a href={`/mpa/${entry.id}`}>View →</a>
             </td>
           </tr>
         ))}
diff --git a/packages/app-react-router/app/routes/spa.detail.tsx b/packages/app-react-router/app/routes/spa.detail.tsx
index 79ed4929..1c71cc8b 100644
--- a/packages/app-react-router/app/routes/spa.detail.tsx
+++ b/packages/app-react-router/app/routes/spa.detail.tsx
@@ -1,8 +1,7 @@
-import { useSearchParams } from 'react-router'
+import { useParams } from 'react-router'
 
 export default function SpaDetailPage() {
-  const [searchParams] = useSearchParams()
-  const id = searchParams.get('id')
+  const { id } = useParams()
 
   return <p id="detail-id">{id}</p>
 }
diff --git a/packages/app-react-router/app/routes/spa.tsx b/packages/app-react-router/app/routes/spa.tsx
index 1a85bfd9..a39268be 100644
--- a/packages/app-react-router/app/routes/spa.tsx
+++ b/packages/app-react-router/app/routes/spa.tsx
@@ -21,7 +21,7 @@ export default function SpaPage() {
             <td>{entry.id}</td>
             <td>{entry.name}</td>
             <td>
-              <Link to={`/spa/detail?id=${entry.id}`}>View →</Link>
+              <Link to={`/spa/${entry.id}`}>View →</Link>
             </td>
           </tr>
         ))}
diff --git a/packages/app-solid-start/src/routes/mpa/[id].tsx b/packages/app-solid-start/src/routes/mpa/[id].tsx
new file mode 100644
index 00000000..cdaa3626
--- /dev/null
+++ b/packages/app-solid-start/src/routes/mpa/[id].tsx
@@ -0,0 +1,7 @@
+import { useParams } from '@solidjs/router'
+
+export default function MpaDetailPage() {
+  const params = useParams()
+
+  return <p id="detail-id">{params.id}</p>
+}
diff --git a/packages/app-solid-start/src/routes/mpa/detail.tsx b/packages/app-solid-start/src/routes/mpa/detail.tsx
deleted file mode 100644
index 0f92099b..00000000
--- a/packages/app-solid-start/src/routes/mpa/detail.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { useSearchParams } from '@solidjs/router'
-
-export default function MpaDetailPage() {
-  const [searchParams] = useSearchParams()
-
-  return <p id="detail-id">{searchParams.id}</p>
-}
diff --git a/packages/app-solid-start/src/routes/mpa/index.tsx b/packages/app-solid-start/src/routes/mpa/index.tsx
index 05e39bec..caf6b214 100644
--- a/packages/app-solid-start/src/routes/mpa/index.tsx
+++ b/packages/app-solid-start/src/routes/mpa/index.tsx
@@ -23,7 +23,7 @@ export default function MpaPage() {
               <td>{entry.id}</td>
               <td>{entry.name}</td>
               <td>
-                <a href={`/mpa/detail?id=${entry.id}`}>View →</a>
+                <a href={`/mpa/${entry.id}`}>View →</a>
               </td>
             </tr>
           )}
diff --git a/packages/app-solid-start/src/routes/spa/[id].tsx b/packages/app-solid-start/src/routes/spa/[id].tsx
new file mode 100644
index 00000000..338d061c
--- /dev/null
+++ b/packages/app-solid-start/src/routes/spa/[id].tsx
@@ -0,0 +1,9 @@
+import { useParams } from '@solidjs/router'
+
+export const ssr = false
+
+export default function SpaDetailPage() {
+  const params = useParams()
+
+  return <p id="detail-id">{params.id}</p>
+}
diff --git a/packages/app-solid-start/src/routes/spa/detail.tsx b/packages/app-solid-start/src/routes/spa/detail.tsx
deleted file mode 100644
index de7c04dd..00000000
--- a/packages/app-solid-start/src/routes/spa/detail.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useSearchParams } from '@solidjs/router'
-
-export const ssr = false
-
-export default function SpaDetailPage() {
-  const [searchParams] = useSearchParams()
-
-  return <p id="detail-id">{searchParams.id}</p>
-}
diff --git a/packages/app-solid-start/src/routes/spa/index.tsx b/packages/app-solid-start/src/routes/spa/index.tsx
index 5ba990ec..672f0147 100644
--- a/packages/app-solid-start/src/routes/spa/index.tsx
+++ b/packages/app-solid-start/src/routes/spa/index.tsx
@@ -20,7 +20,7 @@ export default function SpaPage() {
               <td>{entry.id}</td>
               <td>{entry.name}</td>
               <td>
-                <A href={`/spa/detail?id=${entry.id}`}>View →</A>
+                <A href={`/spa/${entry.id}`}>View →</A>
               </td>
             </tr>
           )}
diff --git a/packages/app-sveltekit/src/routes/mpa/+page.svelte b/packages/app-sveltekit/src/routes/mpa/+page.svelte
index bb7239e0..f4e58251 100644
--- a/packages/app-sveltekit/src/routes/mpa/+page.svelte
+++ b/packages/app-sveltekit/src/routes/mpa/+page.svelte
@@ -9,7 +9,7 @@
         <td>{entry.id}</td>
         <td>{entry.name}</td>
         <td>
-          <a href="/mpa/detail?id={entry.id}" data-sveltekit-reload>View →</a>
+          <a href="/mpa/{entry.id}" data-sveltekit-reload>View →</a>
         </td>
       </tr>
     {/each}
diff --git a/packages/app-sveltekit/src/routes/mpa/[id]/+page.server.ts b/packages/app-sveltekit/src/routes/mpa/[id]/+page.server.ts
new file mode 100644
index 00000000..ca48f7c6
--- /dev/null
+++ b/packages/app-sveltekit/src/routes/mpa/[id]/+page.server.ts
@@ -0,0 +1,5 @@
+import type { PageServerLoad } from './$types'
+
+export const load: PageServerLoad = ({ params }) => {
+  return { id: params.id }
+}
diff --git a/packages/app-sveltekit/src/routes/mpa/detail/+page.svelte b/packages/app-sveltekit/src/routes/mpa/[id]/+page.svelte
similarity index 100%
rename from packages/app-sveltekit/src/routes/mpa/detail/+page.svelte
rename to packages/app-sveltekit/src/routes/mpa/[id]/+page.svelte
diff --git a/packages/app-sveltekit/src/routes/mpa/detail/+page.ts b/packages/app-sveltekit/src/routes/mpa/[id]/+page.ts
similarity index 100%
rename from packages/app-sveltekit/src/routes/mpa/detail/+page.ts
rename to packages/app-sveltekit/src/routes/mpa/[id]/+page.ts
diff --git a/packages/app-sveltekit/src/routes/mpa/detail/+page.server.ts b/packages/app-sveltekit/src/routes/mpa/detail/+page.server.ts
deleted file mode 100644
index e38fc13c..00000000
--- a/packages/app-sveltekit/src/routes/mpa/detail/+page.server.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { PageServerLoad } from './$types'
-
-export const load: PageServerLoad = ({ url }) => {
-  const id = url.searchParams.get('id')
-  return { id }
-}
diff --git a/packages/app-sveltekit/src/routes/spa/+page.svelte b/packages/app-sveltekit/src/routes/spa/+page.svelte
index f5a4f1ae..389d3234 100644
--- a/packages/app-sveltekit/src/routes/spa/+page.svelte
+++ b/packages/app-sveltekit/src/routes/spa/+page.svelte
@@ -13,7 +13,7 @@
       <tr>
         <td>{entry.id}</td>
         <td>{entry.name}</td>
-        <td><a href="/spa/detail?id={entry.id}">View →</a></td>
+        <td><a href="/spa/{entry.id}">View →</a></td>
       </tr>
     {/each}
   </tbody>
diff --git a/packages/app-sveltekit/src/routes/spa/detail/+page.svelte b/packages/app-sveltekit/src/routes/spa/[id]/+page.svelte
similarity index 67%
rename from packages/app-sveltekit/src/routes/spa/detail/+page.svelte
rename to packages/app-sveltekit/src/routes/spa/[id]/+page.svelte
index eeaaa631..c3495f51 100644
--- a/packages/app-sveltekit/src/routes/spa/detail/+page.svelte
+++ b/packages/app-sveltekit/src/routes/spa/[id]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/state'
 
-  const id = page.url.searchParams.get('id')
+  const id = page.params.id
 </script>
 
 <p id="detail-id">{id}</p>
diff --git a/packages/app-sveltekit/src/routes/spa/detail/+page.ts b/packages/app-sveltekit/src/routes/spa/[id]/+page.ts
similarity index 100%
rename from packages/app-sveltekit/src/routes/spa/detail/+page.ts
rename to packages/app-sveltekit/src/routes/spa/[id]/+page.ts
diff --git a/packages/app-tanstack-start-react/src/routeTree.gen.ts b/packages/app-tanstack-start-react/src/routeTree.gen.ts
index 7d7bff2a..794e5d2c 100644
--- a/packages/app-tanstack-start-react/src/routeTree.gen.ts
+++ b/packages/app-tanstack-start-react/src/routeTree.gen.ts
@@ -12,8 +12,8 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as SpaRouteImport } from './routes/spa'
 import { Route as MpaRouteImport } from './routes/mpa'
 import { Route as IndexRouteImport } from './routes/index'
-import { Route as SpaDetailRouteImport } from './routes/spa_.detail'
-import { Route as MpaDetailRouteImport } from './routes/mpa_.detail'
+import { Route as SpaIdRouteImport } from './routes/spa_.$id'
+import { Route as MpaIdRouteImport } from './routes/mpa_.$id'
 
 const SpaRoute = SpaRouteImport.update({
   id: '/spa',
@@ -30,14 +30,14 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
-const SpaDetailRoute = SpaDetailRouteImport.update({
-  id: '/spa_/detail',
-  path: '/spa/detail',
+const SpaIdRoute = SpaIdRouteImport.update({
+  id: '/spa_/$id',
+  path: '/spa/$id',
   getParentRoute: () => rootRouteImport,
 } as any)
-const MpaDetailRoute = MpaDetailRouteImport.update({
-  id: '/mpa_/detail',
-  path: '/mpa/detail',
+const MpaIdRoute = MpaIdRouteImport.update({
+  id: '/mpa_/$id',
+  path: '/mpa/$id',
   getParentRoute: () => rootRouteImport,
 } as any)
 
@@ -45,38 +45,38 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/mpa': typeof MpaRoute
   '/spa': typeof SpaRoute
-  '/mpa/detail': typeof MpaDetailRoute
-  '/spa/detail': typeof SpaDetailRoute
+  '/mpa/$id': typeof MpaIdRoute
+  '/spa/$id': typeof SpaIdRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/mpa': typeof MpaRoute
   '/spa': typeof SpaRoute
-  '/mpa/detail': typeof MpaDetailRoute
-  '/spa/detail': typeof SpaDetailRoute
+  '/mpa/$id': typeof MpaIdRoute
+  '/spa/$id': typeof SpaIdRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/mpa': typeof MpaRoute
   '/spa': typeof SpaRoute
-  '/mpa_/detail': typeof MpaDetailRoute
-  '/spa_/detail': typeof SpaDetailRoute
+  '/mpa_/$id': typeof MpaIdRoute
+  '/spa_/$id': typeof SpaIdRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/mpa' | '/spa' | '/mpa/detail' | '/spa/detail'
+  fullPaths: '/' | '/mpa' | '/spa' | '/mpa/$id' | '/spa/$id'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/mpa' | '/spa' | '/mpa/detail' | '/spa/detail'
-  id: '__root__' | '/' | '/mpa' | '/spa' | '/mpa_/detail' | '/spa_/detail'
+  to: '/' | '/mpa' | '/spa' | '/mpa/$id' | '/spa/$id'
+  id: '__root__' | '/' | '/mpa' | '/spa' | '/mpa_/$id' | '/spa_/$id'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   MpaRoute: typeof MpaRoute
   SpaRoute: typeof SpaRoute
-  MpaDetailRoute: typeof MpaDetailRoute
-  SpaDetailRoute: typeof SpaDetailRoute
+  MpaIdRoute: typeof MpaIdRoute
+  SpaIdRoute: typeof SpaIdRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -102,18 +102,18 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/spa_/detail': {
-      id: '/spa_/detail'
-      path: '/spa/detail'
-      fullPath: '/spa/detail'
-      preLoaderRoute: typeof SpaDetailRouteImport
+    '/spa_/$id': {
+      id: '/spa_/$id'
+      path: '/spa/$id'
+      fullPath: '/spa/$id'
+      preLoaderRoute: typeof SpaIdRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/mpa_/detail': {
-      id: '/mpa_/detail'
-      path: '/mpa/detail'
-      fullPath: '/mpa/detail'
-      preLoaderRoute: typeof MpaDetailRouteImport
+    '/mpa_/$id': {
+      id: '/mpa_/$id'
+      path: '/mpa/$id'
+      fullPath: '/mpa/$id'
+      preLoaderRoute: typeof MpaIdRouteImport
       parentRoute: typeof rootRouteImport
     }
   }
@@ -123,8 +123,8 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   MpaRoute: MpaRoute,
   SpaRoute: SpaRoute,
-  MpaDetailRoute: MpaDetailRoute,
-  SpaDetailRoute: SpaDetailRoute,
+  MpaIdRoute: MpaIdRoute,
+  SpaIdRoute: SpaIdRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
diff --git a/packages/app-tanstack-start-react/src/routes/mpa.tsx b/packages/app-tanstack-start-react/src/routes/mpa.tsx
index 9a2da7f7..de3499d7 100644
--- a/packages/app-tanstack-start-react/src/routes/mpa.tsx
+++ b/packages/app-tanstack-start-react/src/routes/mpa.tsx
@@ -17,7 +17,7 @@ function MpaPage() {
             <td>{entry.id}</td>
             <td>{entry.name}</td>
             <td>
-              <a href={`/mpa/detail?id=${entry.id}`}>View →</a>
+              <a href={`/mpa/${entry.id}`}>View →</a>
             </td>
           </tr>
         ))}
diff --git a/packages/app-tanstack-start-react/src/routes/mpa_.$id.tsx b/packages/app-tanstack-start-react/src/routes/mpa_.$id.tsx
new file mode 100644
index 00000000..c162c399
--- /dev/null
+++ b/packages/app-tanstack-start-react/src/routes/mpa_.$id.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/mpa_/$id')({
+  component: MpaDetailPage,
+})
+
+function MpaDetailPage() {
+  const { id } = Route.useParams()
+
+  return <p id="detail-id">{id}</p>
+}
diff --git a/packages/app-tanstack-start-react/src/routes/mpa_.detail.tsx b/packages/app-tanstack-start-react/src/routes/mpa_.detail.tsx
deleted file mode 100644
index 1022a15e..00000000
--- a/packages/app-tanstack-start-react/src/routes/mpa_.detail.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/mpa_/detail')({
-  validateSearch: (search) => ({
-    id: typeof search.id === 'string' ? search.id : undefined,
-  }),
-  component: MpaDetailPage,
-})
-
-function MpaDetailPage() {
-  const { id } = Route.useSearch()
-
-  return <p id="detail-id">{id}</p>
-}
diff --git a/packages/app-tanstack-start-react/src/routes/spa.tsx b/packages/app-tanstack-start-react/src/routes/spa.tsx
index bc6295c6..22f024e0 100644
--- a/packages/app-tanstack-start-react/src/routes/spa.tsx
+++ b/packages/app-tanstack-start-react/src/routes/spa.tsx
@@ -25,7 +25,7 @@ function SpaPage() {
             <td>{entry.id}</td>
             <td>{entry.name}</td>
             <td>
-              <Link to="/spa/detail" search={{ id: entry.id }}>
+              <Link to="/spa/$id" params={{ id: entry.id }}>
                 View →
               </Link>
             </td>
diff --git a/packages/app-tanstack-start-react/src/routes/spa_.$id.tsx b/packages/app-tanstack-start-react/src/routes/spa_.$id.tsx
new file mode 100644
index 00000000..766faf36
--- /dev/null
+++ b/packages/app-tanstack-start-react/src/routes/spa_.$id.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/spa_/$id')({
+  component: SpaDetailPage,
+})
+
+function SpaDetailPage() {
+  const { id } = Route.useParams()
+
+  return <p id="detail-id">{id}</p>
+}
diff --git a/packages/app-tanstack-start-react/src/routes/spa_.detail.tsx b/packages/app-tanstack-start-react/src/routes/spa_.detail.tsx
deleted file mode 100644
index 1cb41539..00000000
--- a/packages/app-tanstack-start-react/src/routes/spa_.detail.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/spa_/detail')({
-  validateSearch: (search) => ({
-    id: typeof search.id === 'string' ? search.id : undefined,
-  }),
-  component: SpaDetailPage,
-})
-
-function SpaDetailPage() {
-  const { id } = Route.useSearch()
-
-  return <p id="detail-id">{id}</p>
-}