I want to control conditions related to that route in each route instead of building central navigation system in the root route that checks from and to of the navigation event.
To that, my idea was to check pre-conditionsl in a route like this:
export const roomRoute = createRoute({
getParentRoute: () => rootRoute,
path: 'room',
component: InterviewPage,
validateSearch: (search) => interviewSearchSchema.parse(search),
beforeLoad: async ({context, search}) => {
const {jotaiStore} = context;
const preparedTokens = jotaiStore.get(preparedInterviewTokensAtom);
if (!preparedTokens) {
throw redirect({
to: '/setup',
search: (prev) => prev,
replace: true,
} as any);
}
},
});
But now, instead of letting this route decide to where redirect, I want to simply throw an error and let parent/root router decide what to do with it:
beforeLoad: async ({context, search}) => {
const {jotaiStore} = context;
const preparedTokens = jotaiStore.get(preparedInterviewTokensAtom);
if (!preparedTokens) {
throw new TokensNotFoundError();
},
Where can I catch that error? The props onCatch and onError on the root route don't capture it, it seems that the only element that can capture those is errorComponent:
const InterviewErrorBoundary = ({ error }: { error: unknown }) => {
const params = useParams({ from: interviewRoute.id });
if (error instanceof InterviewFlowError) {
const map = {
MissingTokensError: setupRoute.fullPath,
MissingConsentError: consentRoute.fullPath,
InterviewInaccessibleError: inaccessibleRoute.fullPath,
InterviewCompletedError: completedRoute.fullPath,
} as const;
const target = map[(error as any).name];
if (target) throw redirect({ to: target, params, replace: true });
}
throw error; // let global error UI handle unknowns
};
export const interviewRoute = createRoute({
// ...your existing options...
errorComponent: InterviewErrorBoundary,
});
But that feels like a bit wrong approach. Any sussgestions are welcome
