TanStackT
TanStack8mo ago
1 reply
developed-pink

Custom link component params reducer type error

I have this custom link component in order to play nice with tailwind catalyst components:

import * as Headless from "@headlessui/react"
import {
  forwardRef,
  ForwardRefExoticComponent,
  RefAttributes,
  ComponentPropsWithoutRef,
} from "react"
import { Link as RouterLink, LinkProps } from "@tanstack/react-router"
import { router } from "@/router"

type CustomLinkProps = Omit<
  ComponentPropsWithoutRef<typeof RouterLink>,
  "to"
> & {
  href: LinkProps<typeof router>["to"]
}

export const Link: ForwardRefExoticComponent<
  CustomLinkProps & RefAttributes<HTMLAnchorElement>
> = forwardRef<HTMLAnchorElement, CustomLinkProps>(function Link(
  { href, params, search, from, ...rest },
  ref
) {
  return (
    <Headless.DataInteractive>
      <RouterLink
        ref={ref}
        to={href}
        params={params}
        search={search}
        from={from}
        {...rest}
      />
    </Headless.DataInteractive>
  )
})


And I'm now using params to build a path link and getting this TS error:

Object literal may only specify known properties, and 'slug' does not exist in type 'ParamsReducerFn<AnyRouter, "PATH", string, string | undefined>'.ts(2353)


I cannot figure out how to resolve it. The paths are building correctly, the links working fine. I found some gh issues similar but regarding search params

Thank you take care
Was this page helpful?