T
TanStack•3mo ago
itchy-amethyst

ValidateLinkOptionsArray using "from" change of behaviour

I have been making use of ValidateLinkOptionsArray and ValidateFromPath to create page tabs as shown in this example: 
export interface MenuProps<
  TRouter extends RegisteredRouter = RegisteredRouter,
  TItems extends ReadonlyArray<unknown> = ReadonlyArray<unknown>,
  TFrom extends string = string,
> {
  from: ValidateFromPath<TRouter, TFrom>
  items: ValidateLinkOptionsArray<TRouter, TItems, TFrom>
}

export function Menu<
  TRouter extends RegisteredRouter = RegisteredRouter,
  TItems extends ReadonlyArray<unknown>,
  TFrom extends string = string,
>(props: MenuProps<TRouter, TItems, TFrom>): React.ReactNode
export function Menu(props: MenuProps): React.ReactNode {
  return (
    <ul>
      {props.items.map((item) => (
        <li>
          <Link {...item} from={props.from} />
        </li>
      ))}
    </ul>
  )
}
export interface MenuProps<
  TRouter extends RegisteredRouter = RegisteredRouter,
  TItems extends ReadonlyArray<unknown> = ReadonlyArray<unknown>,
  TFrom extends string = string,
> {
  from: ValidateFromPath<TRouter, TFrom>
  items: ValidateLinkOptionsArray<TRouter, TItems, TFrom>
}

export function Menu<
  TRouter extends RegisteredRouter = RegisteredRouter,
  TItems extends ReadonlyArray<unknown>,
  TFrom extends string = string,
>(props: MenuProps<TRouter, TItems, TFrom>): React.ReactNode
export function Menu(props: MenuProps): React.ReactNode {
  return (
    <ul>
      {props.items.map((item) => (
        <li>
          <Link {...item} from={props.from} />
        </li>
      ))}
    </ul>
  )
}
However when I bumped router and start recently ("1.114.12 -> 1.121.16") to move away from vinxi I have encountered a change in behaviour when attempting to include the index page as one of the links. I was using an empty string and it would navigate between the index page and the other relative links back and forth. Now it behaves the same as passing ".", it just stays on the current page always. 
<Menu
  from="/items"
  items={[
    { label: "Browse", to: "" },
    { label: "Uploaded", to: "uploaded" },
    ...
  ]}
/>
<Menu
  from="/items"
  items={[
    { label: "Browse", to: "" },
    { label: "Uploaded", to: "uploaded" },
    ...
  ]}
/>
I realise this was undocumented behaviour and assume somewhere its now defaulting to "." but it seems like a regression? For now I've fixed it by just adding the index route as an absolute also (to: "/items") but can't find what change has caused this to stop working so wanted to check more if it was intended to break this
5 Replies
itchy-amethyst
itchy-amethystOP•3mo ago
found an example which makes use of ../items syntax - it functionally works but the types aren't resolving correctly
No description
like-gold
like-gold•3mo ago
please provide a complete minimal example project
itchy-amethyst
itchy-amethystOP•3mo ago
like-gold
like-gold•3mo ago
cc @Chris Horobin
conscious-sapphire
conscious-sapphire•3mo ago
I create a bug so we can track on GH: https://github.com/TanStack/router/issues/4507 I'll have a dig today, see if I can figure it out, but my TypeScript foo may not be up to par

Did you find this page helpful?