Merge branch 'main' into support-lazy-error-component-on-before-load

Author: beaussan

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)

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

e2e/react-start/basic/src/routeTree.gen.ts

@@ -34,6 +34,7 @@ import { Route as SearchParamsDefaultRouteImport } from './routes/search-params/
 import { Route as RedirectTargetRouteImport } from './routes/redirect/$target'
 import { Route as PostsPostIdRouteImport } from './routes/posts.$postId'
 import { Route as NotFoundViaLoaderRouteImport } from './routes/not-found/via-loader'
+import { Route as NotFoundViaHeadRouteImport } from './routes/not-found/via-head'
 import { Route as NotFoundViaBeforeLoadRouteImport } from './routes/not-found/via-beforeLoad'
 import { Route as ApiUsersRouteImport } from './routes/api.users'
 import { Route as LayoutLayout2RouteImport } from './routes/_layout/_layout-2'
@@ -169,6 +170,11 @@ const NotFoundViaLoaderRoute = NotFoundViaLoaderRouteImport.update({
   path: '/via-loader',
   getParentRoute: () => NotFoundRouteRoute,
 } as any)
+const NotFoundViaHeadRoute = NotFoundViaHeadRouteImport.update({
+  id: '/via-head',
+  path: '/via-head',
+  getParentRoute: () => NotFoundRouteRoute,
+} as any)
 const NotFoundViaBeforeLoadRoute = NotFoundViaBeforeLoadRouteImport.update({
   id: '/via-beforeLoad',
   path: '/via-beforeLoad',
@@ -272,6 +278,7 @@ export interface FileRoutesByFullPath {
   '/대한민국': typeof Char45824Char54620Char48124Char44397Route
   '/api/users': typeof ApiUsersRouteWithChildren
   '/not-found/via-beforeLoad': typeof NotFoundViaBeforeLoadRoute
+  '/not-found/via-head': typeof NotFoundViaHeadRoute
   '/not-found/via-loader': typeof NotFoundViaLoaderRoute
   '/posts/$postId': typeof PostsPostIdRoute
   '/redirect/$target': typeof RedirectTargetRouteWithChildren
@@ -307,6 +314,7 @@ export interface FileRoutesByTo {
   '/대한민국': typeof Char45824Char54620Char48124Char44397Route
   '/api/users': typeof ApiUsersRouteWithChildren
   '/not-found/via-beforeLoad': typeof NotFoundViaBeforeLoadRoute
+  '/not-found/via-head': typeof NotFoundViaHeadRoute
   '/not-found/via-loader': typeof NotFoundViaLoaderRoute
   '/posts/$postId': typeof PostsPostIdRoute
   '/search-params/default': typeof SearchParamsDefaultRoute
@@ -347,6 +355,7 @@ export interface FileRoutesById {
   '/_layout/_layout-2': typeof LayoutLayout2RouteWithChildren
   '/api/users': typeof ApiUsersRouteWithChildren
   '/not-found/via-beforeLoad': typeof NotFoundViaBeforeLoadRoute
+  '/not-found/via-head': typeof NotFoundViaHeadRoute
   '/not-found/via-loader': typeof NotFoundViaLoaderRoute
   '/posts/$postId': typeof PostsPostIdRoute
   '/redirect/$target': typeof RedirectTargetRouteWithChildren
@@ -389,6 +398,7 @@ export interface FileRouteTypes {
     | '/대한민국'
     | '/api/users'
     | '/not-found/via-beforeLoad'
+    | '/not-found/via-head'
     | '/not-found/via-loader'
     | '/posts/$postId'
     | '/redirect/$target'
@@ -424,6 +434,7 @@ export interface FileRouteTypes {
     | '/대한민국'
     | '/api/users'
     | '/not-found/via-beforeLoad'
+    | '/not-found/via-head'
     | '/not-found/via-loader'
     | '/posts/$postId'
     | '/search-params/default'
@@ -463,6 +474,7 @@ export interface FileRouteTypes {
     | '/_layout/_layout-2'
     | '/api/users'
     | '/not-found/via-beforeLoad'
+    | '/not-found/via-head'
     | '/not-found/via-loader'
     | '/posts/$postId'
     | '/redirect/$target'
@@ -673,6 +685,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof NotFoundViaLoaderRouteImport
       parentRoute: typeof NotFoundRouteRoute
     }
+    '/not-found/via-head': {
+      id: '/not-found/via-head'
+      path: '/via-head'
+      fullPath: '/not-found/via-head'
+      preLoaderRoute: typeof NotFoundViaHeadRouteImport
+      parentRoute: typeof NotFoundRouteRoute
+    }
     '/not-found/via-beforeLoad': {
       id: '/not-found/via-beforeLoad'
       path: '/via-beforeLoad'
@@ -797,12 +816,14 @@ declare module '@tanstack/react-router' {
 
 interface NotFoundRouteRouteChildren {
   NotFoundViaBeforeLoadRoute: typeof NotFoundViaBeforeLoadRoute
+  NotFoundViaHeadRoute: typeof NotFoundViaHeadRoute
   NotFoundViaLoaderRoute: typeof NotFoundViaLoaderRoute
   NotFoundIndexRoute: typeof NotFoundIndexRoute
 }
 
 const NotFoundRouteRouteChildren: NotFoundRouteRouteChildren = {
   NotFoundViaBeforeLoadRoute: NotFoundViaBeforeLoadRoute,
+  NotFoundViaHeadRoute: NotFoundViaHeadRoute,
   NotFoundViaLoaderRoute: NotFoundViaLoaderRoute,
   NotFoundIndexRoute: NotFoundIndexRoute,
 }

e2e/react-start/basic/src/routes/not-found/index.tsx

@@ -25,6 +25,16 @@ export const Route = createFileRoute('/not-found/')({
             via-loader
           </Link>
         </div>
+        <div className="mb-2">
+          <Link
+            from={Route.fullPath}
+            to="./via-head"
+            preload={preload}
+            data-testid="via-head"
+          >
+            via-head
+          </Link>
+        </div>
       </div>
     )
   },

e2e/react-start/basic/src/routes/not-found/via-head.tsx

@@ -0,0 +1,23 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/not-found/via-head')({
+  head: () => {
+    throw notFound()
+  },
+  component: RouteComponent,
+  notFoundComponent: () => {
+    return (
+      <div data-testid="via-head-notFound-component">
+        Not Found "/not-found/via-head"!
+      </div>
+    )
+  },
+})
+
+function RouteComponent() {
+  return (
+    <div data-testid="via-head-route-component" data-server={typeof window}>
+      Hello "/not-found/via-head"!
+    </div>
+  )
+}

e2e/react-start/basic/src/routes/users.$userId.tsx

@@ -1,14 +1,16 @@
 import { ErrorComponent, createFileRoute } from '@tanstack/react-router'
 import axios from 'redaxios'
+import { getRouterInstance } from '@tanstack/react-start'
 import type { ErrorComponentProps } from '@tanstack/react-router'
 
 import type { User } from '~/utils/users'
 import { NotFound } from '~/components/NotFound'
 
 export const Route = createFileRoute('/users/$userId')({
   loader: async ({ params: { userId } }) => {
+    const router = await getRouterInstance()
     return await axios
-      .get<User>('/api/users/' + userId)
+      .get<User>('/api/users/' + userId, { baseURL: router.options.origin })
       .then((r) => r.data)
       .catch(() => {
         throw new Error('Failed to fetch user')

e2e/react-start/basic/src/routes/users.tsx

@@ -1,12 +1,14 @@
 import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
+import { getRouterInstance } from '@tanstack/react-start'
 import axios from 'redaxios'
 
 import type { User } from '~/utils/users'
 
 export const Route = createFileRoute('/users')({
   loader: async () => {
+    const router = await getRouterInstance()
     return await axios
-      .get<Array<User>>('/api/users')
+      .get<Array<User>>('/api/users', { baseURL: router.options.origin })
       .then((r) => r.data)
       .catch(() => {
         throw new Error('Failed to fetch users')

e2e/react-start/basic/tests/not-found.spec.ts

@@ -9,6 +9,7 @@ const combinate = (combinateImport as any).default as typeof combinateImport
 test.use({
   whitelistErrors: [
     /Failed to load resource: the server responded with a status of 404/,
+    'NotFound error during hydration for routeId',
   ],
 })
 test.describe('not-found', () => {
@@ -25,7 +26,7 @@ test.describe('not-found', () => {
   test.describe('throw notFound()', () => {
     const navigationTestMatrix = combinate({
       // TODO beforeLoad!
-      thrower: [/* 'beforeLoad',*/ 'loader'] as const,
+      thrower: [/* 'beforeLoad',*/ 'head', 'loader'] as const,
       preload: [false, true] as const,
     })
 
@@ -57,7 +58,7 @@ test.describe('not-found', () => {
     const directVisitTestMatrix = combinate({
       // TODO beforeLoad!
 
-      thrower: [/* 'beforeLoad',*/ 'loader'] as const,
+      thrower: [/* 'beforeLoad',*/ 'head', 'loader'] as const,
     })
 
     directVisitTestMatrix.forEach(({ thrower }) => {

e2e/react-start/basic/tests/prerendering.spec.ts

@@ -14,7 +14,6 @@ test.describe('Prerender Static Path Discovery', () => {
       // These static routes should be automatically discovered and prerendered
       expect(existsSync(join(distDir, 'index.html'))).toBe(true)
       expect(existsSync(join(distDir, 'posts/index.html'))).toBe(true)
-      expect(existsSync(join(distDir, 'users/index.html'))).toBe(true)
       expect(existsSync(join(distDir, 'deferred/index.html'))).toBe(true)
       expect(existsSync(join(distDir, 'scripts/index.html'))).toBe(true)
       expect(existsSync(join(distDir, 'inline-scripts/index.html'))).toBe(true)
@@ -40,14 +39,5 @@ test.describe('Prerender Static Path Discovery', () => {
       const html = readFileSync(join(distDir, 'posts/index.html'), 'utf-8')
       expect(html).toContain('Select a post.')
     })
-
-    test('should contain prerendered content in users.html', () => {
-      const distDir = join(process.cwd(), 'dist', 'client')
-      expect(existsSync(join(distDir, 'users/index.html'))).toBe(true)
-
-      // "Select a user." should be in the prerendered HTML
-      const html = readFileSync(join(distDir, 'users/index.html'), 'utf-8')
-      expect(html).toContain('Select a user.')
-    })
   })
 })

e2e/react-start/basic/vite.config.ts

@@ -20,7 +20,9 @@ const prerenderConfiguration = {
       '/redirect',
       '/i-do-not-exist',
       '/not-found/via-beforeLoad',
+      '/not-found/via-head',
       '/not-found/via-loader',
+      '/users',
     ].some((p) => page.path.includes(p)),
   maxRedirects: 100,
 }
@@ -33,7 +35,6 @@ export default defineConfig({
     tsConfigPaths({
       projects: ['./tsconfig.json'],
     }),
-    // @ts-ignore we want to keep one test with verboseFileRoutes off even though the option is hidden
     tanstackStart({
       spa: isSpaMode ? spaModeConfiguration : undefined,
       prerender: isPrerender ? prerenderConfiguration : undefined,