How can I validate a link param in validateSearch?

[lrosenfeldt]

I want to add a redirect search param to dynamically redirect a User on login. I currently only check if the param is a string, but I would like to check if it is a valid link within my app. It would be nice if could check the given link within validateSearch.

Without any better idea I would try to catch the navigate call and than redirect to the fallback if I hit the not found error.

import { createFileRoute, isNotFound } from '@tanstack/react-router';

export type AuthSearchOptions = {
  redirect?: string;
};

export const Route = createFileRoute('/_auth')({
  component: AuthLayout,
  validateSearch: (search: Record<string, unknown>): AuthSearchOptions => {
    if (Object.prototype.hasOwnProperty.call(search, 'redirect') && typeof search['redirect'] === 'string') {
      return {
        redirect: search['redirect'],
      };
    }
    return {};
  },
});

function AuthLayout() {
  const search = Route.useSearch();
  const navigate = Route.useNavigate();

  async function onSubmit() {
    let res: any = undefined;
    try {
      // not defined, only for illustration
      res = await api.login();
    } catch {
      // api error handling
    }

    if (res) {
      try {
        await navigate({ to: search.redirect ?? '/' });
      } catch (error) {
        if (isNotFound(error)) {
          await navigate({ to: '/' });
        }
      }
    }
  }

  return (
    <div>
      <button type="button" onClick={() => onSubmit()}>
        Login
      </button>
    </div>
  );
}

I really enjoy working with the router, thank you for the nice work!

[DeluxeOwl]

Did you figure it out?