Prevent `component` from rendering when `beforeLoad` throws an error.

This is my root router, and I want to prevent

component

component

from rendering its content when an error is thrown in

beforeLoad

beforeLoad

.
The docs says the following

This async function is called before a route is loaded. If an error is thrown here, the route's loader will not be called and the route will not render

https://tanstack.com/router/latest/docs/framework/react/api/router/RouteOptionsType#beforeload-method

But in my case

<Outlet />

<Outlet />

is rendering although

catch

catch

is logged in the console. Am I missing something?

export const Route = createRootRoute({
  wrapInSuspense: true,
  beforeLoad: async () => {
    try {
      await new Promise((resolve, reject) => setTimeout(reject, 1000));
    } catch {
      console.log('catch');
    }
  },
  pendingComponent: () => <h1>Loading...</h1>,
  component: () => <Outlet />,
});

export const Route = createRootRoute({
  wrapInSuspense: true,
  beforeLoad: async () => {
    try {
      await new Promise((resolve, reject) => setTimeout(reject, 1000));
    } catch {
      console.log('catch');
    }
  },
  pendingComponent: () => <h1>Loading...</h1>,
  component: () => <Outlet />,
});

RouteOptions type | TanStack Router React Docs

The RouteOptions type is used to describe the options that can be used when creating a route.

RouteOptions properties

TanStack•2y ago•

1 reply

conventional-black

Prevent `component` from rendering when `beforeLoad` throws an error.

This is my root router, and I want to prevent

component

component

from rendering its content when an error is thrown in

beforeLoad

beforeLoad

.
The docs says the following

This async function is called before a route is loaded. If an error is thrown here, the route's loader will not be called and the route will not render

https://tanstack.com/router/latest/docs/framework/react/api/router/RouteOptionsType#beforeload-method

But in my case

<Outlet />

<Outlet />

is rendering although

catch

catch

is logged in the console. Am I missing something?

export const Route = createRootRoute({
  wrapInSuspense: true,
  beforeLoad: async () => {
    try {
      await new Promise((resolve, reject) => setTimeout(reject, 1000));
    } catch {
      console.log('catch');
    }
  },
  pendingComponent: () => <h1>Loading...</h1>,
  component: () => <Outlet />,
});

export const Route = createRootRoute({
  wrapInSuspense: true,
  beforeLoad: async () => {
    try {
      await new Promise((resolve, reject) => setTimeout(reject, 1000));
    } catch {
      console.log('catch');
    }
  },
  pendingComponent: () => <h1>Loading...</h1>,
  component: () => <Outlet />,
});

RouteOptions type | TanStack Router React Docs

The RouteOptions type is used to describe the options that can be used when creating a route.

RouteOptions properties

Prevent `component` from rendering when `beforeLoad` throws an error.

Similar Threads

Prevent `component` from rendering when `beforeLoad` throws an error.

Similar Threads

Similar Threads

Similar Threads