Call the error component if outlet throws?
toto.tsx has an error component defined and renders the outlet:
toto.$id.tsx throws:
Why the errorComponent of toto.tsx is not called?
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>
);
}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>;
}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?