Can you strongly type or validate path parameters?

[dgraham-nectivio]

I have a route with a path parameter that is union of string literals.

  type MailboxName = 'inbox' | 'sent' | 'drafts' | 'trash' | 'junk'

  export const Route = createFileRoute('/_app/mailboxes/$mailbox/')({  component: () => <Mailbox /> }),

  function Mailbox() {
     const { mailbox } = Route.useParams()

     /// Snip...
  }

Is there a way to strongly type that $mailbox is MailboxName, so that TS flags navigate({ to: '/mailboxes/inblox' }) as an error.

Currently I have a check in my loader the validate that the parameter is an expected value and does a throw notFound() if it isn't but I'd like to know if there's a better way of handling this case.

[TkDodo]

I think parseParams should do this, no?

https://tanstack.com/router/latest/docs/framework/react/api/router/RouteOptionsType#parseparams-method

[dgraham-nectivio]

Thanks @TkDodo that does mostly what I wanted.

This is what I settled on :

const MailboxNames = ['inbox', 'sent', 'drafts', 'trash', 'junk'] as const

type MailboxName = (typeof MailboxNames)[number]

export const Route = createFileRoute('/_app/mailboxes/$mailbox/')({
  component: Mailbox,
  parseParams: (params) => {
    const mailbox = MailboxNames.find((x) => x === params.mailbox.toLowerCase())
    if (!mailbox) throw Error(`"${params.mailbox}" is not a valid mailbox name.`)
    return { mailbox }
  },
  onError: (error) => {
    if (error?.routerCode === 'PARSE_PARAMS')
      throw redirect({ to: '/mailboxes/$mailbox', params: { mailbox: 'inbox' } })
  },
})

function Mailbox() {
  const { mailbox } = Route.useParams() // mailbox : MailboxName
  /// snip
}

A few annoyances:

1. If you have a beforeLoad or loader on your route your strong typing is lost and you get a Record<string, string> instead.
2. You can't throw a notFound() or redirect() from within parseParams
3. onError doesn't get the error that was thrown in parseParams passed in, I only know that the error occurred within parseParams not what the error was.

[TkDodo]

this also works really well with schemas:

const mailboxes = z.object({
  mailbox: z.enum(['inbox', 'sent', 'drafts', 'trash', 'junk'])
})

then just pass:

parseParams: mailboxes.parse

[rahulxdemon]

this also works really well with schemas:

const mailboxes = z.object({
  mailbox: z.enum(['inbox', 'sent', 'drafts', 'trash', 'junk'])
})

then just pass:

parseParams: mailboxes.parse

This will parse the params and will give typesafe params in the LinkProps as well

[omonk]

🚨 parseParams have been deprecated in favour of params.parse

[tiagoernst]

Is there a way to have this parsing globally ? Right now I've created a util for a param that is reused on many parts of I'm app but I still need to do it on every route

[schiller-manuel]

can you please create a new discussion entry with a complete minimal example that shows what you are currently doing?

[em843]

Minimal example for params.parse:

export const Route = createFileRoute('/state/$stateId')({
  params: {
    parse: (rawParams) => {
      const stateId = rawParams.stateId as StateAbbr;
      return { stateId };
    },
  },
  component: State,
});
  
  function State() {
  const { stateId } = Route.useParams(); // stateId is now of type StateAbbr
}