conscious-sapphire

What's the best way to validate path params?

Let's say I had the route: '/read/$language' And I wanted to validate that the $language path param was of a certain type (like type Language = "English" | "Spanish" ) or throw/fallback/redirect. How could I do that? Server functions, middleware, and even search params have validators. Maybe we could add validation of path params as well? Perhaps there was a decision to not add path param validation... If so, maybe someone could let me know why. Thanks!

6 Replies

conscious-sapphireOP•8mo ago

For now I will do my own validation in my RouteComponent (so I'm not blocked). However, I'd be happy to hear if anyone has input on path param typing and validation. 😄

helpful-purple•8mo ago

I don't see it documented but: https://tanstack.com/router/latest/docs/framework/react/api/router/RouteOptionsType#paramsparse-method And example: https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink-react-query-file-based dashboard.invoices.$invoiceId.tsx has an example

React TanStack Router Kitchen Sink React Query File Based Example |...

An example showing how to implement Kitchen Sink React Query File Based in React using TanStack Router.

RouteOptions type | TanStack Router React Docs

The RouteOptions type is used to describe the options that can be used when creating a route. RouteOptions properties The RouteOptions type accepts an object with the following properties: getParentRo...

conscious-sapphireOP•8mo ago

Thanks!

equal-aqua•8mo ago

PRs for the docs are always welcome

helpful-purple•8mo ago

I can try and add something when I get home today

conscious-sapphireOP•8mo ago

FWIW I had some custom types and wasn't able to use zod so have something like this:

export const Route = createFileRoute(
  '/languages/$language/$script/$characters',
)({
  component: RouteComponent,
  params: {
    parse: (params) => ({
      language: params.language as Language,
      script: params.script as Script<Language>,
      characters: params.characters,
    }),
  },
});

export const Route = createFileRoute(
  '/languages/$language/$script/$characters',
)({
  component: RouteComponent,
  params: {
    parse: (params) => ({
      language: params.language as Language,
      script: params.script as Script<Language>,
      characters: params.characters,
    }),
  },
});

Thanks for the direction 🙏

Gaming

Programming

What's the best way to validate path params?

Did you find this page helpful?