Call the error component if outlet throws?

toto.tsx has an error component defined and renders the outlet:

import { createFileRoute, Outlet } from "@tanstack/react-router";

export const Route = createFileRoute("/toto")({
  component: RouteComponent,
  errorComponent: MyError,
});

function MyError() {
  return <div>Error occurred</div>;
}

function RouteComponent() {
  return (
    <div>
      Root Component
      <Outlet />
    </div>
  );
}


toto.$id.tsx throws:

import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/toto/$id")({
  component: RouteComponent,
});

function RouteComponent() {
  useSuspenseQuery({
    queryKey: ["xx"],
    queryFn: async () => {
      throw new Error("test error");
    },
  });

  return <div>Hello from child</div>;
}


Why the errorComponent of toto.tsx is not called?
Was this page helpful?