From f907711225969c5cfea7dd557b2a0feeadb8e2af Mon Sep 17 00:00:00 2001
From: leesb971204 <leesb971204@gmail.com>
Date: Tue, 22 Jul 2025 20:14:42 +0900
Subject: [PATCH 01/13] fix(router): spread data props in notFoundComponent

Signed-off-by: leesb971204 <leesb971204@gmail.com>
---
 packages/react-router/src/renderRouteNotFound.tsx | 4 ++--
 packages/solid-router/src/renderRouteNotFound.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-router/src/renderRouteNotFound.tsx b/packages/react-router/src/renderRouteNotFound.tsx
index 26cf5b09288..86f31dfc220 100644
--- a/packages/react-router/src/renderRouteNotFound.tsx
+++ b/packages/react-router/src/renderRouteNotFound.tsx
@@ -10,7 +10,7 @@ export function renderRouteNotFound(
 ) {
   if (!route.options.notFoundComponent) {
     if (router.options.defaultNotFoundComponent) {
-      return <router.options.defaultNotFoundComponent data={data} />
+      return <router.options.defaultNotFoundComponent {...data} />
     }
 
     if (process.env.NODE_ENV === 'development') {
@@ -23,5 +23,5 @@ export function renderRouteNotFound(
     return <DefaultGlobalNotFound />
   }
 
-  return <route.options.notFoundComponent data={data} />
+  return <route.options.notFoundComponent {...data} />
 }
diff --git a/packages/solid-router/src/renderRouteNotFound.tsx b/packages/solid-router/src/renderRouteNotFound.tsx
index b7421d863c0..4603e6c0a31 100644
--- a/packages/solid-router/src/renderRouteNotFound.tsx
+++ b/packages/solid-router/src/renderRouteNotFound.tsx
@@ -9,7 +9,7 @@ export function renderRouteNotFound(
 ) {
   if (!route.options.notFoundComponent) {
     if (router.options.defaultNotFoundComponent) {
-      return <router.options.defaultNotFoundComponent data={data} />
+      return <router.options.defaultNotFoundComponent {...data} />
     }
 
     if (process.env.NODE_ENV === 'development') {
@@ -22,5 +22,5 @@ export function renderRouteNotFound(
     return <DefaultGlobalNotFound />
   }
 
-  return <route.options.notFoundComponent data={data} />
+  return <route.options.notFoundComponent {...data} />
 }

From a3bdffdae4369fe732b48d8a0ddc054441303423 Mon Sep 17 00:00:00 2001
From: leesb971204 <leesb971204@gmail.com>
Date: Tue, 22 Jul 2025 20:57:15 +0900
Subject: [PATCH 02/13] refactor(router-core): change proper NotFoundRouteProps
 type definition

Signed-off-by: leesb971204 <leesb971204@gmail.com>
---
 packages/router-core/src/route.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/router-core/src/route.ts b/packages/router-core/src/route.ts
index b89549cdc64..4b5d81ff9ba 100644
--- a/packages/router-core/src/route.ts
+++ b/packages/router-core/src/route.ts
@@ -1322,10 +1322,7 @@ export type ErrorComponentProps<TError = Error> = {
   info?: { componentStack: string }
   reset: () => void
 }
-export type NotFoundRouteProps = {
-  // TODO: Make sure this is `| null | undefined` (this is for global not-founds)
-  data: unknown
-}
+export type NotFoundRouteProps = Partial<NotFoundError>
 
 export class BaseRoute<
   in out TParentRoute extends AnyRoute = AnyRoute,

From 35ec1177d9be0cd7d088a45aa7ed8640575a4b79 Mon Sep 17 00:00:00 2001
From: leesb971204 <leesb971204@gmail.com>
Date: Sat, 2 Aug 2025 19:25:13 +0900
Subject: [PATCH 03/13] test(react-router): add test verify notFoundRouteProps
 properly passes data

Signed-off-by: leesb971204 <leesb971204@gmail.com>
---
 .../react-router/tests/not-found.test.tsx     | 118 +++++++++++++++++-
 1 file changed, 117 insertions(+), 1 deletion(-)

diff --git a/packages/react-router/tests/not-found.test.tsx b/packages/react-router/tests/not-found.test.tsx
index 9bcbdbd79c8..974bbc9fae7 100644
--- a/packages/react-router/tests/not-found.test.tsx
+++ b/packages/react-router/tests/not-found.test.tsx
@@ -9,8 +9,9 @@ import {
   createRootRoute,
   createRoute,
   createRouter,
+  notFound,
 } from '../src'
-import type { RouterHistory } from '../src'
+import type { NotFoundRouteProps, RouterHistory } from '../src'
 
 let history: RouterHistory
 
@@ -123,3 +124,118 @@ test.each([
     expect(notFoundComponent).toBeInTheDocument()
   },
 )
+
+test('defaultNotFoundComponent and notFoundComponent receives data props via spread operator', async () => {
+  const customData = {
+    message: 'Custom not found message',
+  }
+
+  const DefaultNotFoundComponentWithProps = (props: NotFoundRouteProps) => (
+    <div data-testid="default-not-found-with-props">
+      <span data-testid="message">{props.data.message}</span>
+    </div>
+  )
+
+  const NotFoundComponentWithProps = (props: NotFoundRouteProps) => (
+    <div data-testid="not-found-with-props">
+      <span data-testid="message">{props.data.message}</span>
+    </div>
+  )
+
+  const rootRoute = createRootRoute({
+    component: () => (
+      <div data-testid="root-component">
+        <h1>Root Component</h1>
+        <div>
+          <Link
+            data-testid="default-not-found-route-link"
+            to="/default-not-found-route"
+          >
+            link to default not found route
+          </Link>
+          <Link data-testid="not-found-route-link" to="/not-found-route">
+            link to not found route
+          </Link>
+        </div>
+        <Outlet />
+      </div>
+    ),
+  })
+
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => (
+      <div data-testid="index-component">
+        <h2>Index Page</h2>
+      </div>
+    ),
+  })
+
+  const defaultNotFoundRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/default-not-found-route',
+    loader: () => {
+      throw notFound({ data: customData })
+    },
+    component: () => (
+      <div data-testid="default-not-found-route-component">
+        Should not render
+      </div>
+    ),
+  })
+
+  const notFoundRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/not-found-route',
+    loader: () => {
+      throw notFound({ data: customData })
+    },
+    component: () => (
+      <div data-testid="not-found-route-component">Should not render</div>
+    ),
+    notFoundComponent: NotFoundComponentWithProps,
+  })
+
+  const router = createRouter({
+    routeTree: rootRoute.addChildren([
+      indexRoute,
+      defaultNotFoundRoute,
+      notFoundRoute,
+    ]),
+    history,
+    defaultNotFoundComponent: DefaultNotFoundComponentWithProps,
+  })
+
+  render(<RouterProvider router={router} />)
+  await router.load()
+  await screen.findByTestId('root-component')
+
+  const defaultNotFoundRouteLink = screen.getByTestId(
+    'default-not-found-route-link',
+  )
+  defaultNotFoundRouteLink.click()
+
+  const defaultNotFoundComponent = await screen.findByTestId(
+    'default-not-found-with-props',
+    {},
+    { timeout: 1000 },
+  )
+  expect(defaultNotFoundComponent).toBeInTheDocument()
+
+  const defaultNotFoundComponentMessage = await screen.findByTestId('message')
+  expect(defaultNotFoundComponentMessage).toHaveTextContent(customData.message)
+
+  const notFoundRouteLink = screen.getByTestId('not-found-route-link')
+  notFoundRouteLink.click()
+
+  const notFoundComponent = await screen.findByTestId(
+    'not-found-with-props',
+    {},
+    { timeout: 1000 },
+  )
+  expect(notFoundComponent).toBeInTheDocument()
+
+  const errorMessageComponent = await screen.findByTestId('message')
+  expect(errorMessageComponent).toHaveTextContent(customData.message)
+})

From 0b6cccb2096d685af22c7a85897756eae8d78cb9 Mon Sep 17 00:00:00 2001
From: leesb971204 <leesb971204@gmail.com>
Date: Sat, 2 Aug 2025 20:20:09 +0900
Subject: [PATCH 04/13] docs(react-router): correct type annotation for data in
 notFoundComponent

Signed-off-by: leesb971204 <leesb971204@gmail.com>
---
 docs/router/framework/react/guide/not-found-errors.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/router/framework/react/guide/not-found-errors.md b/docs/router/framework/react/guide/not-found-errors.md
index acf45085b67..43cfe9a57d1 100644
--- a/docs/router/framework/react/guide/not-found-errors.md
+++ b/docs/router/framework/react/guide/not-found-errors.md
@@ -240,7 +240,7 @@ export const Route = createFileRoute('/posts/$postId')({
       })
     return { post }
   },
-  // `data: unknown` is passed to the component via the `data` option when calling `notFound`
+  // `data: any` is passed to the component via the `data` option when calling `notFound`
   notFoundComponent: ({ data }) => {
     // ❌ useLoaderData is not valid here: const { post } = Route.useLoaderData()
 

From 2e28b590b3894b55260996e051c8313348e2f0c8 Mon Sep 17 00:00:00 2001
From: leesb971204 <leesb971204@gmail.com>
Date: Sun, 3 Aug 2025 21:08:09 +0900
Subject: [PATCH 05/13] refactor(router-core): enhance NotFoundRouteProps type
 with generics and isNotFound, routeId

Signed-off-by: leesb971204 <leesb971204@gmail.com>
---
 packages/router-core/src/route.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/router-core/src/route.ts b/packages/router-core/src/route.ts
index 4b5d81ff9ba..db3b211b561 100644
--- a/packages/router-core/src/route.ts
+++ b/packages/router-core/src/route.ts
@@ -14,7 +14,7 @@ import type {
   RouteMatch,
 } from './Matches'
 import type { RootRouteId } from './root'
-import type { ParseRoute, RouteById, RoutePaths } from './routeInfo'
+import type { ParseRoute, RouteById, RouteIds, RoutePaths } from './routeInfo'
 import type { AnyRouter, RegisteredRouter } from './router'
 import type { BuildLocationFn, NavigateFn } from './RouterProvider'
 import type {
@@ -1322,7 +1322,12 @@ export type ErrorComponentProps<TError = Error> = {
   info?: { componentStack: string }
   reset: () => void
 }
-export type NotFoundRouteProps = Partial<NotFoundError>
+
+export type NotFoundRouteProps<TData = unknown> = {
+  data?: TData
+  isNotFound: boolean
+  routeId: RouteIds<RegisteredRouter['routeTree']>
+}
 
 export class BaseRoute<
   in out TParentRoute extends AnyRoute = AnyRoute,

From 3f98c6719d961fe2a35e1a6eb050d5b3adc5d404 Mon Sep 17 00:00:00 2001
From: leesb971204 <leesb971204@gmail.com>
Date: Wed, 13 Aug 2025 17:27:24 +0900
Subject: [PATCH 06/13] refactor(router-core): simplify NotFoundRouteProps type
 by removing generics

Signed-off-by: leesb971204 <leesb971204@gmail.com>
---
 packages/router-core/src/route.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/router-core/src/route.ts b/packages/router-core/src/route.ts
index db3b211b561..2a7f74fdbb1 100644
--- a/packages/router-core/src/route.ts
+++ b/packages/router-core/src/route.ts
@@ -1323,8 +1323,8 @@ export type ErrorComponentProps<TError = Error> = {
   reset: () => void
 }
 
-export type NotFoundRouteProps<TData = unknown> = {
-  data?: TData
+export type NotFoundRouteProps = {
+  data?: unknown
   isNotFound: boolean
   routeId: RouteIds<RegisteredRouter['routeTree']>
 }

From 337c1683f54a74a0ff6c6945933744d9f3e6c719 Mon Sep 17 00:00:00 2001
From: leesb971204 <leesb971204@gmail.com>
Date: Wed, 13 Aug 2025 17:27:42 +0900
Subject: [PATCH 07/13] test(react-router): improve notFoundComponent tests
 with type guard for data props

Signed-off-by: leesb971204 <leesb971204@gmail.com>
---
 .../react-router/tests/not-found.test.tsx     | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/react-router/tests/not-found.test.tsx b/packages/react-router/tests/not-found.test.tsx
index 974bbc9fae7..ce8bdf1207f 100644
--- a/packages/react-router/tests/not-found.test.tsx
+++ b/packages/react-router/tests/not-found.test.tsx
@@ -126,19 +126,19 @@ test.each([
 )
 
 test('defaultNotFoundComponent and notFoundComponent receives data props via spread operator', async () => {
+  const isCustomData = (data: unknown): data is typeof customData => {
+    return 'message' in (data as typeof customData)
+  }
+
   const customData = {
     message: 'Custom not found message',
   }
 
   const DefaultNotFoundComponentWithProps = (props: NotFoundRouteProps) => (
     <div data-testid="default-not-found-with-props">
-      <span data-testid="message">{props.data.message}</span>
-    </div>
-  )
-
-  const NotFoundComponentWithProps = (props: NotFoundRouteProps) => (
-    <div data-testid="not-found-with-props">
-      <span data-testid="message">{props.data.message}</span>
+      <span data-testid="message">
+        {isCustomData(props.data) && <span>{props.data.message}</span>}
+      </span>
     </div>
   )
 
@@ -194,7 +194,13 @@ test('defaultNotFoundComponent and notFoundComponent receives data props via spr
     component: () => (
       <div data-testid="not-found-route-component">Should not render</div>
     ),
-    notFoundComponent: NotFoundComponentWithProps,
+    notFoundComponent: (props) => (
+      <div data-testid="not-found-with-props">
+        <span data-testid="message">
+          {isCustomData(props.data) && <span>{props.data.message}</span>}
+        </span>
+      </div>
+    ),
   })
 
   const router = createRouter({

From 0fc4886871ad3c0ec49efc143d88f7f819725c20 Mon Sep 17 00:00:00 2001
From: leesb971204 <leesb971204@gmail.com>
Date: Wed, 13 Aug 2025 17:36:25 +0900
Subject: [PATCH 08/13] docs(router): revert type annotation for data in
 notFoundComponent

Signed-off-by: leesb971204 <leesb971204@gmail.com>
---
 docs/router/framework/react/guide/not-found-errors.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/router/framework/react/guide/not-found-errors.md b/docs/router/framework/react/guide/not-found-errors.md
index 43cfe9a57d1..acf45085b67 100644
--- a/docs/router/framework/react/guide/not-found-errors.md
+++ b/docs/router/framework/react/guide/not-found-errors.md
@@ -240,7 +240,7 @@ export const Route = createFileRoute('/posts/$postId')({
       })
     return { post }
   },
-  // `data: any` is passed to the component via the `data` option when calling `notFound`
+  // `data: unknown` is passed to the component via the `data` option when calling `notFound`
   notFoundComponent: ({ data }) => {
     // ❌ useLoaderData is not valid here: const { post } = Route.useLoaderData()
 

From 17e1384ef3c193c9e11b8ee5122c3d1736a0f9ee Mon Sep 17 00:00:00 2001
From: leesb971204 <leesb971204@gmail.com>
Date: Wed, 13 Aug 2025 17:52:34 +0900
Subject: [PATCH 09/13] docs(router): add NotFoundComponent documentation and
 update router API reference

Signed-off-by: leesb971204 <leesb971204@gmail.com>
---
 docs/router/framework/react/api/router.md     |  1 +
 .../api/router/notFoundComponentComponent.md  | 36 +++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 docs/router/framework/react/api/router/notFoundComponentComponent.md

diff --git a/docs/router/framework/react/api/router.md b/docs/router/framework/react/api/router.md
index ad3a58f8512..e760a073788 100644
--- a/docs/router/framework/react/api/router.md
+++ b/docs/router/framework/react/api/router.md
@@ -32,6 +32,7 @@ title: Router API
   - [`<Link>`](../router/linkComponent.md)
   - [`<MatchRoute>`](../router/matchRouteComponent.md)
   - [`<Navigate>`](../router/navigateComponent.md)
+  - [`<NotFoundComponent>`](../router/notFoundComponentComponent.md)
   - [`<Outlet>`](../router/outletComponent.md)
 - Hooks
   - [`useAwaited`](../router/useAwaitedHook.md)
diff --git a/docs/router/framework/react/api/router/notFoundComponentComponent.md b/docs/router/framework/react/api/router/notFoundComponentComponent.md
new file mode 100644
index 00000000000..63b9f93ae05
--- /dev/null
+++ b/docs/router/framework/react/api/router/notFoundComponentComponent.md
@@ -0,0 +1,36 @@
+---
+id: notFoundComponentComponent
+title: NotFoundComponent component
+---
+
+The `NotFoundComponent` component is a component that renders when a not-found error occurs in a route.
+
+## NotFoundComponent props
+
+The `NotFoundComponent` component accepts the following props:
+
+### `props.data` prop
+
+- Type: `unknown`
+- Optional
+- Custom data that is passed to the `notFoundComponent` when the not-found error is handled
+- This data comes from the `data` property of the `NotFoundError` object
+
+### `props.isNotFound` prop
+
+- Type: `boolean`
+- Required
+- A boolean value indicating whether the current state is a not-found error state
+- This value is always `true`
+
+### `props.routeId` prop
+
+- Type: `RouteIds<RegisteredRouter['routeTree']>`
+- Required
+- The ID of the route that is attempting to handle the not-found error
+- Must be one of the valid route IDs from the router's route tree
+
+## NotFoundComponent returns
+
+- Returns appropriate UI for not-found error situations
+- Typically includes a "page not found" message along with links to go home or navigate to previous pages

From a29b9054b96b66112b2e540899c65225e813f585 Mon Sep 17 00:00:00 2001
From: leesb971204 <leesb971204@gmail.com>
Date: Tue, 23 Sep 2025 16:50:52 +0900
Subject: [PATCH 10/13] feat(router): add case not-found flow in kitchen sink

Signed-off-by: leesb971204 <leesb971204@gmail.com>
---
 examples/react/kitchen-sink/src/main.tsx | 62 +++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/examples/react/kitchen-sink/src/main.tsx b/examples/react/kitchen-sink/src/main.tsx
index 3465637ce0d..b7e4c372db8 100644
--- a/examples/react/kitchen-sink/src/main.tsx
+++ b/examples/react/kitchen-sink/src/main.tsx
@@ -11,6 +11,7 @@ import {
   createRoute,
   createRouter,
   lazyRouteComponent,
+  notFound,
   redirect,
   retainSearchParams,
   useNavigate,
@@ -29,6 +30,7 @@ import {
   postInvoice,
 } from './mockTodos'
 import { useMutation } from './useMutation'
+import type { NotFoundRouteProps } from '@tanstack/react-router'
 import type { Invoice } from './mockTodos'
 import './styles.css'
 
@@ -36,6 +38,39 @@ import './styles.css'
 
 type UsersViewSortBy = 'name' | 'id' | 'email'
 
+type MissingUserData = {
+  userId: number
+}
+
+function isMissingUserData(data: unknown): data is MissingUserData {
+  return (
+    typeof data === 'object' &&
+    data !== null &&
+    typeof (data as { userId?: unknown }).userId === 'number'
+  )
+}
+
+function UsersNotFoundComponent({ data, routeId }: NotFoundRouteProps) {
+  const userId = isMissingUserData(data) ? data.userId : undefined
+
+  return (
+    <div className="p-4 space-y-2">
+      <h4 className="text-lg font-bold">User not found</h4>
+      <p>
+        {typeof userId === 'number'
+          ? `We couldn't find a user with ID ${userId}.`
+          : "We couldn't find the requested user."}
+      </p>
+      <p className="text-xs text-gray-500">
+        Rendered by the "{routeId}" route.
+      </p>
+      <p className="text-sm text-gray-500">
+        Pick another user from the list on the left to continue.
+      </p>
+    </div>
+  )
+}
+
 const rootRoute = createRootRouteWithContext<{
   auth: Auth
 }>()({
@@ -449,6 +484,7 @@ const usersLayoutRoute = createRoute({
     sortBy: usersView?.sortBy ?? 'name',
   }),
   loader: ({ deps }) => fetchUsers(deps),
+  notFoundComponent: UsersNotFoundComponent,
   component: UsersLayoutComponent,
 })
 
@@ -563,6 +599,18 @@ function UsersLayoutComponent() {
             </div>
           )
         })}
+        <div className="px-3 py-2 text-xs text-gray-500 bg-gray-100 dark:bg-gray-800/60">
+          Need to see how not-found errors look?{' '}
+          <Link
+            to={userRoute.to}
+            search={{
+              userId: 404,
+            }}
+            className="text-blue-700"
+          >
+            Try loading user 404
+          </Link>
+        </div>
       </div>
       <div className="flex-initial border-l">
         <Outlet />
@@ -610,7 +658,19 @@ const userRoute = createRoute({
   loaderDeps: ({ search: { userId } }) => ({
     userId,
   }),
-  loader: ({ deps: { userId } }) => fetchUserById(userId),
+  loader: async ({ deps: { userId } }) => {
+    const user = await fetchUserById(userId)
+
+    if (!user) {
+      throw notFound({
+        data: {
+          userId,
+        },
+      })
+    }
+
+    return user
+  },
   component: UserComponent,
 })
 

From b2e4a0ee701df75595d162c9557f58a2fd9aef6d Mon Sep 17 00:00:00 2001
From: leesb971204 <leesb971204@gmail.com>
Date: Wed, 24 Sep 2025 09:11:28 +0900
Subject: [PATCH 11/13] test(router): add type test for notFoundRouteProps

Signed-off-by: leesb971204 <leesb971204@gmail.com>
---
 packages/router-core/tests/load.test-d.ts | 138 ++++++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 packages/router-core/tests/load.test-d.ts

diff --git a/packages/router-core/tests/load.test-d.ts b/packages/router-core/tests/load.test-d.ts
new file mode 100644
index 00000000000..d356698cf47
--- /dev/null
+++ b/packages/router-core/tests/load.test-d.ts
@@ -0,0 +1,138 @@
+import { describe, expectTypeOf, test } from 'vitest'
+import type { NotFoundRouteProps, RegisteredRouter, RouteIds } from '../src'
+
+describe('NotFoundRouteProps', () => {
+  test('should have correct basic property types', () => {
+    expectTypeOf<NotFoundRouteProps['data']>().toEqualTypeOf<
+      unknown | undefined
+    >()
+    expectTypeOf<NotFoundRouteProps['isNotFound']>().toEqualTypeOf<boolean>()
+    expectTypeOf<NotFoundRouteProps['routeId']>().toEqualTypeOf<
+      RouteIds<RegisteredRouter['routeTree']>
+    >()
+  })
+
+  test('should have data as optional property', () => {
+    expectTypeOf<NotFoundRouteProps>().toMatchTypeOf<{
+      data?: unknown
+      isNotFound: boolean
+      routeId: RouteIds<RegisteredRouter['routeTree']>
+    }>()
+  })
+
+  test('should have isNotFound as required property', () => {
+    expectTypeOf<Pick<NotFoundRouteProps, 'isNotFound'>>().toEqualTypeOf<{
+      isNotFound: boolean
+    }>()
+  })
+
+  test('should have routeId as required property', () => {
+    expectTypeOf<Pick<NotFoundRouteProps, 'routeId'>>().toEqualTypeOf<{
+      routeId: RouteIds<RegisteredRouter['routeTree']>
+    }>()
+  })
+
+  test('should be assignable with minimal required properties', () => {
+    const props: NotFoundRouteProps = {
+      isNotFound: true,
+      routeId: '/' as RouteIds<RegisteredRouter['routeTree']>,
+    }
+    expectTypeOf(props).toMatchTypeOf<NotFoundRouteProps>()
+  })
+
+  test('should be assignable with all properties', () => {
+    const props: NotFoundRouteProps = {
+      data: { message: 'Not found' },
+      isNotFound: true,
+      routeId: '/' as RouteIds<RegisteredRouter['routeTree']>,
+    }
+    expectTypeOf(props).toMatchTypeOf<NotFoundRouteProps>()
+  })
+
+  test('should accept any data type', () => {
+    const propsWithString: NotFoundRouteProps = {
+      data: 'string data',
+      isNotFound: true,
+      routeId: '/' as RouteIds<RegisteredRouter['routeTree']>,
+    }
+    expectTypeOf(propsWithString).toMatchTypeOf<NotFoundRouteProps>()
+
+    const propsWithObject: NotFoundRouteProps = {
+      data: { userId: 123, message: 'User not found' },
+      isNotFound: true,
+      routeId: '/users' as RouteIds<RegisteredRouter['routeTree']>,
+    }
+    expectTypeOf(propsWithObject).toMatchTypeOf<NotFoundRouteProps>()
+
+    const propsWithArray: NotFoundRouteProps = {
+      data: [1, 2, 3],
+      isNotFound: true,
+      routeId: '/' as RouteIds<RegisteredRouter['routeTree']>,
+    }
+    expectTypeOf(propsWithArray).toMatchTypeOf<NotFoundRouteProps>()
+  })
+
+  test('should accept undefined data', () => {
+    const props: NotFoundRouteProps = {
+      data: undefined,
+      isNotFound: true,
+      routeId: '/' as RouteIds<RegisteredRouter['routeTree']>,
+    }
+    expectTypeOf(props).toMatchTypeOf<NotFoundRouteProps>()
+  })
+
+  test('notFoundComponent should accept NotFoundRouteProps', () => {
+    type NotFoundComponent = (props: NotFoundRouteProps) => any
+
+    const component: NotFoundComponent = (props) => {
+      expectTypeOf(props.data).toEqualTypeOf<unknown | undefined>()
+      expectTypeOf(props.isNotFound).toEqualTypeOf<boolean>()
+      expectTypeOf(props.routeId).toEqualTypeOf<
+        RouteIds<RegisteredRouter['routeTree']>
+      >()
+      return null
+    }
+
+    expectTypeOf(component).toMatchTypeOf<NotFoundComponent>()
+  })
+
+  test('defaultNotFoundComponent should accept NotFoundRouteProps', () => {
+    type DefaultNotFoundComponent = (props: NotFoundRouteProps) => any
+
+    const component: DefaultNotFoundComponent = (props) => {
+      expectTypeOf(props).toMatchTypeOf<NotFoundRouteProps>()
+      return null
+    }
+
+    expectTypeOf(component).toMatchTypeOf<DefaultNotFoundComponent>()
+  })
+
+  test('should be spreadable as component props', () => {
+    const notFoundData = {
+      data: { message: 'Custom error' },
+      isNotFound: true as const,
+      routeId: '/' as RouteIds<RegisteredRouter['routeTree']>,
+    }
+
+    type SpreadProps = typeof notFoundData
+    expectTypeOf<SpreadProps>().toMatchTypeOf<NotFoundRouteProps>()
+
+    const component = (props: NotFoundRouteProps) => {
+      expectTypeOf(props).toMatchTypeOf<NotFoundRouteProps>()
+      return null
+    }
+
+    expectTypeOf(component).parameter(0).toMatchTypeOf<NotFoundRouteProps>()
+  })
+
+  test('should maintain type safety with spread', () => {
+    const data: NotFoundRouteProps = {
+      data: { userId: 123 },
+      isNotFound: true,
+      routeId: '/users' as RouteIds<RegisteredRouter['routeTree']>,
+    }
+
+    const spreadData = { ...data }
+    expectTypeOf(spreadData).toMatchTypeOf<NotFoundRouteProps>()
+  })
+})

From 675eb07f0f834f26754273aba07410477944a7b7 Mon Sep 17 00:00:00 2001
From: Birk Skyum <birk.skyum@pm.me>
Date: Wed, 19 Nov 2025 19:34:20 +0100
Subject: [PATCH 12/13] add test to solid-router

---
 packages/solid-router/src/Match.tsx           |   7 +-
 .../solid-router/tests/not-found.test.tsx     | 124 +++++++++++++++++-
 2 files changed, 129 insertions(+), 2 deletions(-)

diff --git a/packages/solid-router/src/Match.tsx b/packages/solid-router/src/Match.tsx
index ae62c408ecf..8484ad233f0 100644
--- a/packages/solid-router/src/Match.tsx
+++ b/packages/solid-router/src/Match.tsx
@@ -308,7 +308,12 @@ export const MatchInner = (props: { matchId: string }): any => {
         {(_) => {
           invariant(isNotFound(match().error), 'Expected a notFound error')
 
-          return renderRouteNotFound(router, route(), match().error)
+          // Use Show with keyed to ensure re-render when routeId changes
+          return (
+            <Solid.Show when={matchState()!.routeId} keyed>
+              {(_routeId) => renderRouteNotFound(router, route(), match().error)}
+            </Solid.Show>
+          )
         }}
       </Solid.Match>
       <Solid.Match when={match().status === 'redirected'}>
diff --git a/packages/solid-router/tests/not-found.test.tsx b/packages/solid-router/tests/not-found.test.tsx
index 355235e3f2a..38a3e639444 100644
--- a/packages/solid-router/tests/not-found.test.tsx
+++ b/packages/solid-router/tests/not-found.test.tsx
@@ -9,8 +9,9 @@ import {
   createRootRoute,
   createRoute,
   createRouter,
+  notFound,
 } from '../src'
-import type { RouterHistory } from '../src'
+import type { NotFoundRouteProps, RouterHistory } from '../src'
 
 let history: RouterHistory
 
@@ -123,3 +124,124 @@ test.each([
     expect(notFoundComponent).toBeInTheDocument()
   },
 )
+
+test('defaultNotFoundComponent and notFoundComponent receives data props via spread operator', async () => {
+  const isCustomData = (data: unknown): data is typeof customData => {
+    return 'message' in (data as typeof customData)
+  }
+
+  const customData = {
+    message: 'Custom not found message',
+  }
+
+  const DefaultNotFoundComponentWithProps = (props: NotFoundRouteProps) => (
+    <div data-testid="default-not-found-with-props">
+      <span data-testid="message">
+        {isCustomData(props.data) && <span>{props.data.message}</span>}
+      </span>
+    </div>
+  )
+
+  const rootRoute = createRootRoute({
+    component: () => (
+      <div data-testid="root-component">
+        <h1>Root Component</h1>
+        <div>
+          <Link
+            data-testid="default-not-found-route-link"
+            to="/default-not-found-route"
+          >
+            link to default not found route
+          </Link>
+          <Link data-testid="not-found-route-link" to="/not-found-route">
+            link to not found route
+          </Link>
+        </div>
+        <Outlet />
+      </div>
+    ),
+  })
+
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => (
+      <div data-testid="index-component">
+        <h2>Index Page</h2>
+      </div>
+    ),
+  })
+
+  const defaultNotFoundRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/default-not-found-route',
+    loader: () => {
+      throw notFound({ data: customData })
+    },
+    component: () => (
+      <div data-testid="default-not-found-route-component">
+        Should not render
+      </div>
+    ),
+  })
+
+  const notFoundRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/not-found-route',
+    loader: () => {
+      throw notFound({ data: customData })
+    },
+    component: () => (
+      <div data-testid="not-found-route-component">Should not render</div>
+    ),
+    notFoundComponent: (props) => (
+      <div data-testid="not-found-with-props">
+        <span data-testid="message">
+          {isCustomData(props.data) && <span>{props.data.message}</span>}
+        </span>
+      </div>
+    ),
+  })
+
+  const router = createRouter({
+    routeTree: rootRoute.addChildren([
+      indexRoute,
+      defaultNotFoundRoute,
+      notFoundRoute,
+    ]),
+    history,
+    defaultNotFoundComponent: DefaultNotFoundComponentWithProps,
+  })
+
+  render(() => <RouterProvider router={router} />)
+  await router.load()
+  await screen.findByTestId('root-component')
+
+  const defaultNotFoundRouteLink = screen.getByTestId(
+    'default-not-found-route-link',
+  )
+  defaultNotFoundRouteLink.click()
+
+  const defaultNotFoundComponent = await screen.findByTestId(
+    'default-not-found-with-props',
+    {},
+    { timeout: 1000 },
+  )
+  expect(defaultNotFoundComponent).toBeInTheDocument()
+
+  const defaultNotFoundComponentMessage = await screen.findByTestId('message')
+  expect(defaultNotFoundComponentMessage).toHaveTextContent(customData.message)
+
+  const notFoundRouteLink = screen.getByTestId('not-found-route-link')
+  notFoundRouteLink.click()
+
+  const notFoundComponent = await screen.findByTestId(
+    'not-found-with-props',
+    {},
+    { timeout: 1000 },
+  )
+  expect(notFoundComponent).toBeInTheDocument()
+
+  const errorMessageComponent = await screen.findByTestId('message')
+  expect(errorMessageComponent).toHaveTextContent(customData.message)
+})

From b0b6c9e7a7a09dd76c451932863f50586ccaebaa Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 19 Nov 2025 18:38:59 +0000
Subject: [PATCH 13/13] ci: apply automated fixes

---
 packages/solid-router/src/Match.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/solid-router/src/Match.tsx b/packages/solid-router/src/Match.tsx
index 8484ad233f0..0e6afc46715 100644
--- a/packages/solid-router/src/Match.tsx
+++ b/packages/solid-router/src/Match.tsx
@@ -311,7 +311,9 @@ export const MatchInner = (props: { matchId: string }): any => {
           // Use Show with keyed to ensure re-render when routeId changes
           return (
             <Solid.Show when={matchState()!.routeId} keyed>
-              {(_routeId) => renderRouteNotFound(router, route(), match().error)}
+              {(_routeId) =>
+                renderRouteNotFound(router, route(), match().error)
+              }
             </Solid.Show>
           )
         }}