T
TanStack•9mo ago
fascinating-indigo

How can I design typesafe callback urls?

I currently have this pattern for my auth routes: 
const schema = z.object({
  callbackUrl: z.string().optional(),
});

export const Route = createFileRoute('/auth/login')({
  validateSearch: schema,
  component: () => (
    <AuthLayout>
      <LoginForm />
    </AuthLayout>
  ),
});
const schema = z.object({
  callbackUrl: z.string().optional(),
});

export const Route = createFileRoute('/auth/login')({
  validateSearch: schema,
  component: () => (
    <AuthLayout>
      <LoginForm />
    </AuthLayout>
  ),
});
I would like to make it so I can pass in valid routes. Ideally with support for path or search params so I can use it like this: 
() => router.navigate({ to: '/auth/login', search: { callbackUrl: {to: 'post/$postId', params: { postId: post.id }}})
() => router.navigate({ to: '/auth/login', search: { callbackUrl: {to: 'post/$postId', params: { postId: post.id }}})
Has anybody found a way to do this? Or is there a recommended way I have been missing in the docs?
2 Replies
harsh-harlequin
harsh-harlequin•9mo ago
I think LinkOptions is what you're looking for! https://tanstack.com/router/latest/docs/framework/react/api/router/linkOptions#link-options
Link options | TanStack Router React Docs
linkOptions is a function which type checks an object literal with the intention of being used for Link, navigate or redirect linkOptions props The linkOptions accepts the following option: ...props T...
fascinating-indigo
fascinating-indigoOP•9mo ago
Ahhh.. I came across the linkOptions properties documentation but missed that one. Thank you! That looks like it should work.

Did you find this page helpful?