e18e · AlexanderKaran · Jun 14, 2026 · Jun 14, 2026
@@ -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>
 }
@@ -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>
         ))}

@@ -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>
           ))

@@ -1,5 +1,5 @@
 ---
-const id = Astro.url.searchParams.get('id')
+const { id } = Astro.params
 ---
 
 <html lang="en">

@@ -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>
@@ -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>
+}
@@ -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>
         ))}

@@ -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>
         ))}

@@ -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>
+}
@@ -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>

@@ -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>

@@ -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>

@@ -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>

@@ -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
@@ -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 }
 }
 

@@ -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>
         ))}

@@ -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>
 }
@@ -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>
         ))}

@@ -0,0 +1,7 @@
+import { useParams } from '@solidjs/router'
+
+export default function MpaDetailPage() {
+  const params = useParams()
+
+  return <p id="detail-id">{params.id}</p>
+}
@@ -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>
           )}

@@ -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>
+}
@@ -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>
           )}

@@ -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}

@@ -0,0 +1,5 @@
+import type { PageServerLoad } from './$types'
+
+export const load: PageServerLoad = ({ params }) => {
+  return { id: params.id }
+}
@@ -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>

@@ -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>