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 {id}
}
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() {
{entry.id} |
{entry.name} |
- View →
+ View →
|
))}
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()
{entry.id} |
{entry.name} |
- View →
+ View →
|
))
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
---
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
---
@@ -9,6 +11,6 @@ import SpaDetail from '../../components/SpaDetail'
Astro SPA Detail
-
+
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 {id}
+}
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 {id}
-}
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() {
{entry.id} |
{entry.name} |
- View →
+ View →
|
))}
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() {
{entry.id} |
{entry.name} |
- View →
+ View →
|
))}
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 {params.id}
+}
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 {id}
-}
-
-export default function SpaDetailPage() {
- return (
-
-
-
- )
-}
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 @@
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 })
{{ entry.id }} |
{{ entry.name }} |
- View →
+ View →
|
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
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 }, () => ({
{{ entry.id }} |
{{ entry.name }} |
- View →
+ View →
|
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) {
{entry.id} |
{entry.name} |
- View →
+ View →
|
))}
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 {id}
}
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() {
{entry.id} |
{entry.name} |
- View →
+ View →
|
))}
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 {params.id}
+}
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 {searchParams.id}
-}
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() {
{entry.id} |
{entry.name} |
- View →
+ View →
|
)}
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 {params.id}
+}
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 {searchParams.id}
-}
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() {
{entry.id} |
{entry.name} |
- View →
+ View →
|
)}
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 @@
{entry.id} |
{entry.name} |
- View →
+ View →
|
{/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 @@
| {entry.id} |
{entry.name} |
- View → |
+ View → |
{/each}
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 @@
{id}
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() {
{entry.id} |
{entry.name} |
- View →
+ View →
|
))}
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 {id}
+}
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 {id}
-}
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() {
{entry.id} |
{entry.name} |
-
+
View →
|
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 {id}
+}
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 {id}
-}