navigate in beforeLoad handler

[k4in]

export const Route = createFileRoute('/login')({
  beforeLoad: async ({ context, search, navigate }) => {
    try {
      const response = await axios<AuthState>({
        method: 'get',
        url: '/auth',
      });
      context.setAuth(response.data);
      if (response.data.is_authenticated) {
        // throw redirect({ to: search.redirect || '/' });
        navigate({ to: search.redirect || '/', replace: true });
      }
    } catch (error: unknown) {
      if (isAxiosError(error)) {
        if (error.response?.status === 401) {
          console.log('not authenticated'); // in a production app i would display a toast here or something similar, for a good user experience.
          context.clearAuth();
        } else {
          throw new Error('Could not authenticate, unknown error');
        }
      } else {
        console.log(error);
        throw new Error('Unknown error');
      }
    }
  },
  validateSearch: (search: Record<string, unknown>): LoginSearch => {
    return {
      redirect: search.redirect as string,
    };
  },
  component: Login,
});

throw redirect does not work here, the page breaks. navigate works perfectly here, but the function is marked as deprecated. What would be a possible workaround?

The backend API returns a user object, and 401 when the user is not authenticated.

(Yes, i know my catch block is a mess, dont pay attention :P )

[schiller-manuel]

can you please provide a complete minimal example by forking one of the existing stackblitz examples to show why throwing a redirect does not work here?