ratty-blush

Helper to extract type definitions of possible route paths, url.

Hello, the typesafety of the route is awesome. Do we have any helper to extract the possible paths from the router objects?

23 Replies

equal-aqua•4y ago

Currently no helper But array types like that do get type checked

ratty-blushOP•4y ago

hmm I am defining a menu/label/navigation items outside of the router definition/Link navigation itself and was wondering of would be possible to read/extract all types/path based on the router definition. Is that something that would be useful or welcome to be added into the router? Happy to help if it is. Not sure if other people will find it useful though

conscious-sapphire•4y ago

Worked for me using this

export type AllRoutePaths = typeof router.allRouteInfo.routePaths;

export type AllRoutePaths = typeof router.allRouteInfo.routePaths;

ratty-blushOP•4y ago

Nice one thanks

conscious-sapphire•4y ago

BTW this broke when I updated to the latest version. This works now

import { AllRouteInfo } from "@tanstack/react-router";

export type AllRoutePaths = AllRouteInfo<typeof routeConfig>["routePaths"];

import { AllRouteInfo } from "@tanstack/react-router";

export type AllRoutePaths = AllRouteInfo<typeof routeConfig>["routePaths"];

robust-apricot•3y ago

@Chocolate Banana I don't find the AllRouteInfo and I don't know where is the @tanstack/react-router package. Do you have an updated version of your snippet ? Nevermind I foudn it 🙂 Here is the updated type for getting all the routes as a Type:

import { RegisteredRoutesInfo } from "@tanstack/router"

type AllRoutesPaths = RegisteredRoutesInfo["routePaths"]

import { RegisteredRoutesInfo } from "@tanstack/router"

type AllRoutesPaths = RegisteredRoutesInfo["routePaths"]

equal-aqua•3y ago

Would someone here be willing to PR to the docs for this?

conscious-sapphire•3y ago

will create one later today

equal-aqua•3y ago

Thankyou! 🤗

conscious-sapphire•3y ago

should I create a separate guide with use cases or just a small summary with usage in Navigation guide below link

equal-aqua•3y ago

Just a summary below and a smaller heading that can be linked

conscious-sapphire•3y ago

got it tysm

conscious-sapphire•3y ago

@Tanner Linsley

conscious-sapphire•3y ago

rough draft ^

equal-aqua•3y ago

I think there is a significantly better way to do a reusable Link component, but we haven't talked about it yet I'm going to work on it today Hold off before you go any further

conscious-sapphire•3y ago

sure

equal-aqua•3y ago

I think this is more in line with what people are looking for

type CustomLinkProps = { variant?: 'blue' | 'green' }

const CustomLink: LinkComponent<CustomLinkProps> = (props) => {
  const linkProps = useLinkProps(props as any)
  return (
    <a
      {...linkProps}
      className={`${linkProps.className} ${
        props.variant === 'blue' ? 'blue' : 'green'
      }`}
    />
  )
}

type CustomLinkProps = { variant?: 'blue' | 'green' }

const CustomLink: LinkComponent<CustomLinkProps> = (props) => {
  const linkProps = useLinkProps(props as any)
  return (
    <a
      {...linkProps}
      className={`${linkProps.className} ${
        props.variant === 'blue' ? 'blue' : 'green'
      }`}
    />
  )
}

LinkComponent and useLinkProps are exported from the core and each framework adapter too

conscious-sapphire•3y ago

👀 will take a look at it after work

yappiest-sapphire•3y ago

Hello everyone

import { RegisteredRoutesInfo } from "@tanstack/router"

type AllRoutesPaths = RegisteredRoutesInfo["routePaths"]

import { RegisteredRoutesInfo } from "@tanstack/router"

type AllRoutesPaths = RegisteredRoutesInfo["routePaths"]

This is pretty cool but instead of just having a union type of all routes, I would prefer union of all route infos. For example, instead of '/test' I would like to have { to: '/test', search: { mySearchParam: string } }. Just like the object we pass to router.navigate. I lack proficiency with TypeScript, but I tried to do this :

type MyRoutesInfo = Parameters<typeof router.navigate>[0];

type MyRoutesInfo = Parameters<typeof router.navigate>[0];

It doesn't really work because TypeScript complains about missing params property in { params: unknown; } when I do this :

const myRouteInfo: MyRouteInfo = { to: '/test', search: { mySearchParam: 'bob' } }

const myRouteInfo: MyRouteInfo = { to: '/test', search: { mySearchParam: 'bob' } }

Do you have any idea please ?

equal-aqua•3y ago

RegisteredRoutesInfo doesn't exist any more It's all powered by the RouteTree type now You still have RegisteredRouter So to get the Route Tree, you'll do RegisteredRouter['routeTree'] From there, you can use utils like ParseRoute, RoutesById, RouteById, RoutesByPath, RouteByPath So to do a union of all available options of what you just described would be:

type Example = {
  TRoute in ParseRoute<RegisteredRouter['routeTree']> as string: {
    to: TRoute['fullPath'],
    search: TRoute['fullSearchSchema']
  }
}[string]

type Example = {
  TRoute in ParseRoute<RegisteredRouter['routeTree']> as string: {
    to: TRoute['fullPath'],
    search: TRoute['fullSearchSchema']
  }
}[string]

Which would give you { to: '/', search {...}} | { to: '/$postId', search: {...}} There's lots of ways to slice it Just depends on what you need

yappiest-sapphire•3y ago

Thanks. TypeScript complains about fullSearchSchema not existing. What I need was the same type we pass to router.navigate. If I create an object : const myRoute: MyRoute = { to: '/test' } and the search prop or params for this specific route are missing, I would like TypeScript to raise an error. That's because I'm implementing a generic onboarding system for my application. I order the onboarding routes in an array, and when I press the "Next Step" button, I look for the next route in the array and pass it to router.navigate (or I put its properties in a Link or Navigate, both should work depending on the case) takes me to the next step according to the current step. If I do something like that :

{
  to: TRoute['fullPath'],
  search: TRoute['fullSearchSchema'],
  params: ...
}

{
  to: TRoute['fullPath'],
  search: TRoute['fullSearchSchema'],
  params: ...
}

Then I would like search and params to depend on the route in to

equal-aqua•3y ago

Ah, try TRoute['__types']['fullSearchSchema] I forgot that the types are nested under there Psych, I just moved them to types So it'll be TRoute['types']['fullSearchSchema'] in the latest version

genetic-orange•3y ago

I can't find this import anywhere nvm, found the announcement but it's not clear how can I use it 😦 I ended up using something like this:

import { ToPathOption } from '@tanstack/react-router';

export interface SidebarLink {
    title: string;
    url: ToPathOption;
}

import { ToPathOption } from '@tanstack/react-router';

export interface SidebarLink {
    title: string;
    url: ToPathOption;
}

It doesn't validate the URLs to what I registered but the error has gone away and I can build now.

Gaming

Programming

Helper to extract type definitions of possible route paths, url.

Did you find this page helpful?