vicious-gold

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

vicious-goldOP•6mo ago

found an example which makes use of ../items syntax - it functionally works but the types aren't resolving correctly

future-harlequin•6mo ago

please provide a complete minimal example project

vicious-goldOP•6mo ago

https://stackblitz.com/edit/tanstack-router-1yctepja?file=src%2Froutes%2Fitems%2Froute.tsx

future-harlequin•6mo ago

cc @Chris Horobin

sunny-green•6mo 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

Gaming

Programming

ValidateLinkOptionsArray using "from" change of behaviour

Did you find this page helpful?