T
TanStack•3mo ago
flat-fuchsia

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>
  )
})
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)
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
1 Reply
absent-sapphire
absent-sapphire•3mo ago
you should use creatLink https://tanstack.com/router/latest/docs/framework/react/guide/custom-link#createlink-for-cross-cutting-concerns
Custom Link | TanStack Router React Docs
While repeating yourself can be acceptable in many situations, you might find that you do it too often. At times, you may want to create cross-cutting components with additional behavior or styles. Yo...

Did you find this page helpful?