linkOptions type error | TanStack | Page 1

golden sundial Mar 7, 2026, 10:47 AM

#

Hello I'm trying to figure out if I'm using linkOptions wrong because I got some type errors and I can't figure out why

Object literal may only specify known properties, and 'label' does not exist in type 'LinkComponentProps<"a", RouterCore<Route<Register, any, "/", "/", string, "__root__", undefined, {}, RouterContext, AnyContext, () => Promise<{ session: { user: StripEmptyObjects<{ id: string; ... 5 more ...; image?: string | ... 1 more ... | undefined; }>; session: StripEmptyObjects<...>; } | null; }>, ... 6 more ....'.

import { linkOptions } from '@tanstack/react-router'
...

const items = linkOptions([
  { to: '/farms/$farmId/field/$fieldId/add-operation', label: 'Operation' },
  { to: '/farms/$farmId/field/$fieldId/add-soil-test', label: 'Soil Test' },
  { to: '/farms/$farmId/field/$fieldId/add-yield', label: 'Yield' },
])

export function FieldAddLinks() {
  const { farmId, fieldId } = fieldRouteApi.useParams()

  return (
    <div className={styles.root}>
      {items.map((item) => (
        <Link
          key={item.to}
          {...item}
          params={{ farmId, fieldId }}
          className={styles.link}
        >
          <Plus size={12} /> {item.label}
        </Link>
      ))}
    </div>
  )
}

// __root.tsx
type RouterContext = {
  trpc: typeof trpc
  queryClient: QueryClient
}

export const Route = createRootRouteWithContext<RouterContext>()({
  beforeLoad: async () => {
    const session = await getSessionFn()
    return { session }
  },

  head: () => ({
    ...
  }),

  shellComponent: RootDocument,
  errorComponent: ({ error }) => <RouteError error={error} />,
  notFoundComponent: RouteNotFound,
})```

lime zenith Mar 31, 2026, 10:44 AM

#

Hi, i have the same issue, although the docs state that linkOptions allows additional keys it throws these error messages when adding a label. Did you solve this?

lime zenith Mar 31, 2026, 11:13 AM

#

I think using the createLink function is the recommended way here


const Link = createLink(({ children, className, ...props }: BasicLinkProps) => (
  <a
    className={cn(
      'flex h-full items-center border-b-2 border-transparent py-1 font-semibold whitespace-nowrap text-gray-500 data-[status=active]:border-black data-[status=active]:text-foreground',
      className,
    )}
    {...props}
  >
    {children}
  </a>
));

But then i suggest the tanstack team to remove the linkOptions docs

#linkOptions type error