Link component params prop type error

Application works fine with no crashes, but I get this type error. NOTE: Broke after updating from 1.19.4 to 1.24.0

12 Replies

multiple-amethyst•2y ago

can you please provide a minimal complete example , e.g. by forking one of the existing examples on stackblitz?

variable-limeOP•2y ago

found the solution, just needed to remove the as const for the array (also don't need to use the ternary operator then, it automatically knows when to put the params) though I don't know if that's intended, since now it loses type safety as I can write whatever I want in the array https://codesandbox.io/p/devbox/friendly-sun-xkfrg6?file=%2Fsrc%2Froutes%2F__root.tsx still happening, even after updating to latest version 😦

multiple-amethyst•2y ago

cc @Chris Horobin

foreign-sapphire•2y ago

I assume it's because the href is a union. I can add type tests for this if we're supposed to support unions as well

multiple-amethyst•2y ago

it works for this:

const links = [
 {
    href: '/',
    text: 'Home',
  },
  {
    href: '/posts',
    text: 'Posts',
  },/*
  {
    href: '/posts/$postId',
    text: 'Post ID',
  }*/
 ] as const

const links = [
 {
    href: '/',
    text: 'Home',
  },
  {
    href: '/posts',
    text: 'Posts',
  },/*
  {
    href: '/posts/$postId',
    text: 'Post ID',
  }*/
 ] as const

and this

const links = [
  /*{
    href: "/",
    text: "Home",
  },*/
  {
    href: "/posts",
    text: "Posts",
  } ,
  {
    href: '/posts/$postId',
    text: 'Post ID',
  },
] as const;

const links = [
  /*{
    href: "/",
    text: "Home",
  },*/
  {
    href: "/posts",
    text: "Posts",
  } ,
  {
    href: '/posts/$postId',
    text: 'Post ID',
  },
] as const;

but not for this

const links = [
  {
    href: "/",
    text: "Home",
  },/*
  {
    href: "/posts",
    text: "Posts",
  },*/
  {
    href: "/posts/$postId",
    text: "Post ID",
  },
] as const;

const links = [
  {
    href: "/",
    text: "Home",
  },/*
  {
    href: "/posts",
    text: "Posts",
  },*/
  {
    href: "/posts/$postId",
    text: "Post ID",
  },
] as const;

so the union per-se is not the problem

variable-limeOP•2y ago

fixed in 1.26, ty manuel

foreign-sapphire•2y ago

Ah so it was routes that are resolving to the index route? /posts had an index route /posts/ or was it the root /? It would be good to know so I can add a type test for it

multiple-amethyst•2y ago

no it was this helper function: https://github.com/TanStack/router/commit/190c921726cde208d0def566e433d1aa4f944cae#diff-5fd7a0f05758a78cf8b73c09e4d71d21af63fe3d9b312b0ee75b04041ef078e7R79 this removed the "trailing slash" from "/" so it resulted in an empty string "" which is an invalid route

GitHub

fix: correctly support to for unions which include the index rout...

…/ (#1393) * fix: correctly support to for unions which include the index route / * chore: ignore snapshots from formatting

foreign-sapphire•2y ago

Yeah, saw that. So, the root route wasn't working? Or was this only happening for unions?

multiple-amethyst•2y ago

it only happened if the root index route was in a union...

foreign-sapphire•2y ago

Interesting! I think I will just add some tests around unions including the root

foreign-sapphire•2y ago

I have added type tests for to unions in this pr. Had to change the current solution as it was breaking the type tests (caused a bug) https://github.com/TanStack/router/pull/1418/files

GitHub

tests: fix type tests for Link, make sure type tests fail in ci and...

Tests were failing and were not type checking in ci Added test cases for to being a union, params being optional if from and to contain the same params

Gaming

Programming

Link component params prop type error

Did you find this page helpful?