robust-apricot

notFound issues

when i add a defaultNotFoundComponent, i'm not sure if that also renders the contents of __root or not becaue it seems like it partially does; but doesn't render HeadContent resulting in a weird error

4 Replies

robust-apricotOP•3mo ago

robust-apricotOP•3mo ago

i think the core issue is that head is not rendered when there is a NotFound on __root

import { createFileRoute, notFound } from "@tanstack/react-router";
import { SHARED_MODELS } from "@uncovr/services/src/ai/defs/model-registry.shared";
import { ChatWithBranches } from "@/components/chat/chat-with-branches";

export const Route = createFileRoute("/models/$modelId")({
  loader: async ({ params }) => {
    if (!(params.modelId in SHARED_MODELS)) {
      throw notFound({
        routeId: "/models/$modelId",
      });
    }
  },
  // component: () => <ChatWithBranches isSharedView={false} />,
  component: () => <div>Hello "/models/$modelId"!</div>,
});

import { createFileRoute, notFound } from "@tanstack/react-router";
import { SHARED_MODELS } from "@uncovr/services/src/ai/defs/model-registry.shared";
import { ChatWithBranches } from "@/components/chat/chat-with-branches";

export const Route = createFileRoute("/models/$modelId")({
  loader: async ({ params }) => {
    if (!(params.modelId in SHARED_MODELS)) {
      throw notFound({
        routeId: "/models/$modelId",
      });
    }
  },
  // component: () => <ChatWithBranches isSharedView={false} />,
  component: () => <div>Hello "/models/$modelId"!</div>,
});

it only happens on this route if i don't specify routeId, or specify "/models/$modelId" then this happens - none of the head is rendered?? but if i change the routeId to literally anything else, it works so confused it happens with any throw notFound() in the loader weird pattern

correct-apricot•3mo ago

you either need to wrap the <html> ... around your notFound component in root, or you move the <html> into shellComponent. see also https://tanstack.com/start/latest/docs/framework/react/selective-ssr#how-to-disable-ssr-of-the-root-route

Selective Server-Side Rendering (SSR) | TanStack Start React Docs

What is Selective SSR? In TanStack Start, routes matching the initial request are rendered on the server by default. This means beforeLoad and loader are executed on the server, followed by rendering...

national-gold•3mo ago

I am learning TanStack Start and building a simple Starter. So still new to things, but here is what I did for global Not Found Page. https://github.com/PaulBratslavsky/strapi-tanstack-start-starter/blob/c1ad1178c3c8c1fa073aa4d007325922981d32a4/client/src/routes/__root.tsx#L27

 

export const Route = createRootRouteWithContext<{
  strapiApi: typeof strapiApi
}>()({
  loader: async () => {
    const globalData = await strapiApi.global.getGlobalData()
    return {
      header: globalData.data.header,
    }
  },
  notFoundComponent: () => {
    return <NotFound title="Page Not Found" message="Global not found." />
  },
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        title: 'TanStack Start Starter',
      },
    ],
    links: [
      {
        rel: 'stylesheet',
        href: globalCss,
      },
      {
        rel: 'stylesheet',
        href: customCss,
      },
    ],
  }),

  shellComponent: RootDocument,
})

 

export const Route = createRootRouteWithContext<{
  strapiApi: typeof strapiApi
}>()({
  loader: async () => {
    const globalData = await strapiApi.global.getGlobalData()
    return {
      header: globalData.data.header,
    }
  },
  notFoundComponent: () => {
    return <NotFound title="Page Not Found" message="Global not found." />
  },
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        title: 'TanStack Start Starter',
      },
    ],
    links: [
      {
        rel: 'stylesheet',
        href: globalCss,
      },
      {
        rel: 'stylesheet',
        href: customCss,
      },
    ],
  }),

  shellComponent: RootDocument,
})

You can also add not found page by routes. Here is my repo of the complete project if you would like to check it out for reference. https://github.com/PaulBratslavsky/strapi-tanstack-start-starter

GitHub

GitHub - PaulBratslavsky/strapi-tanstack-start-starter

Contribute to PaulBratslavsky/strapi-tanstack-start-starter development by creating an account on GitHub.

GitHub

strapi-tanstack-start-starter/client/src/routes/__root.tsx at c1ad1...

Contribute to PaulBratslavsky/strapi-tanstack-start-starter development by creating an account on GitHub.

Gaming

Programming

notFound issues

Did you find this page helpful?