T
TanStack•17mo ago
ratty-blush

Throw notFound() gets me a blank page

For example, whenever this code triggers a notFound, i get a blank page. 
export const Route = createFileRoute("/_authenticated/admin/")({
  beforeLoad: async () => {
    const user = await getUser();
    if (!user) {
      throw redirect({ to: "/login" });
    }

    const isUserAdmin = user.roles.some((role) => ADMIN_ROLES.includes(role));
    if (!isUserAdmin) {
      throw notFound();
    }
  },
  errorComponent: ({ error }) => <ErrorComponent error={error} />,
});
export const Route = createFileRoute("/_authenticated/admin/")({
  beforeLoad: async () => {
    const user = await getUser();
    if (!user) {
      throw redirect({ to: "/login" });
    }

    const isUserAdmin = user.roles.some((role) => ADMIN_ROLES.includes(role));
    if (!isUserAdmin) {
      throw notFound();
    }
  },
  errorComponent: ({ error }) => <ErrorComponent error={error} />,
});
This is my router code: 
import { ErrorComponent, createRouter } from "@tanstack/react-router";
import { routeTree } from "../routeTree.gen";
import NotFoundPage from "@/components/NotFoundPage";

// Set up a Router instance
const router = createRouter({
  routeTree,
  defaultPreload: "intent",
  defaultNotFoundComponent: () => <NotFoundPage />,
  defaultErrorComponent: ({ error }) => <ErrorComponent error={error} />,
});

// Register things for typesafety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

export default router;
import { ErrorComponent, createRouter } from "@tanstack/react-router";
import { routeTree } from "../routeTree.gen";
import NotFoundPage from "@/components/NotFoundPage";

// Set up a Router instance
const router = createRouter({
  routeTree,
  defaultPreload: "intent",
  defaultNotFoundComponent: () => <NotFoundPage />,
  defaultErrorComponent: ({ error }) => <ErrorComponent error={error} />,
});

// Register things for typesafety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

export default router;
The not found page is just a bunch of text for the 404 error
1 Reply
ratty-blush
ratty-blushOP•17mo ago
Here is a code preview: https://codesandbox.io/p/devbox/snowy-dust-fjhnx2?file=%2Fsrc%2Froutes%2F_layout%2F_layout-2%2Flayout-b.tsx%3A7%2C5 When you try access /layout-b, you get a blank page instead of notFoundComponent

Did you find this page helpful?