Move Away From Full Page Load (#243)

Author: AlexanderKaran

packages/app-next-js/app/mpa/page.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link'
 import { testData } from '../../../testdata/src/ssr'
 
 export const dynamic = 'force-dynamic'
@@ -13,7 +14,7 @@ export default async function MpaPage() {
             <td>{entry.id}</td>
             <td>{entry.name}</td>
             <td>
-              <a href={`/mpa/${entry.id}`}>View →</a>
+              <Link href={`/mpa/${entry.id}`}>View →</Link>
             </td>
           </tr>
         ))}

packages/app-react-router/app/routes/mpa.tsx

@@ -1,3 +1,4 @@
+import { Link } from 'react-router'
 import { testData } from '../../../testdata/src/ssr'
 import type { Route } from './+types/mpa'
 
@@ -15,7 +16,7 @@ export default function MpaPage({ loaderData }: Route.ComponentProps) {
             <td>{entry.id}</td>
             <td>{entry.name}</td>
             <td>
-              <a href={`/mpa/${entry.id}`}>View →</a>
+              <Link to={`/mpa/${entry.id}`}>View →</Link>
             </td>
           </tr>
         ))}

packages/app-solid-start/src/routes/mpa/index.tsx

@@ -1,5 +1,5 @@
 import { For } from 'solid-js'
-import { query, createAsync } from '@solidjs/router'
+import { A, query, createAsync } from '@solidjs/router'
 import { testData } from '../../../../testdata/src/ssr'
 
 const getData = query(async () => {
@@ -23,7 +23,7 @@ export default function MpaPage() {
               <td>{entry.id}</td>
               <td>{entry.name}</td>
               <td>
-                <a href={`/mpa/${entry.id}`}>View →</a>
+                <A href={`/mpa/${entry.id}`}>View →</A>
               </td>
             </tr>
           )}

packages/app-sveltekit/src/routes/mpa/+page.svelte

@@ -9,7 +9,7 @@
         <td>{entry.id}</td>
         <td>{entry.name}</td>
         <td>
-          <a href="/mpa/{entry.id}" data-sveltekit-reload>View →</a>
+          <a href="/mpa/{entry.id}">View →</a>
         </td>
       </tr>
     {/each}

packages/app-tanstack-start-react/src/routes/mpa.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, Link } from '@tanstack/react-router'
 import { testData } from '../../../testdata/src/ssr'
 
 export const Route = createFileRoute('/mpa')({
@@ -17,7 +17,9 @@ function MpaPage() {
             <td>{entry.id}</td>
             <td>{entry.name}</td>
             <td>
-              <a href={`/mpa/${entry.id}`}>View →</a>
+              <Link to="/mpa/$id" params={{ id: entry.id }}>
+                View →
+              </Link>
             </td>
           </tr>
         ))}