T
TanStack•10mo ago
ratty-blush

Link component always returns `isActive` `true`

Hi all 👋🏼 Version: 0.0.1-beta.53 I'm using the Link component but they all return true for isActive: 
<Link ref={ref} {...linkProps}>
  {({ isActive }) => {
    return (
      <CustomNavigation text={text} icon={icon} active={isActive} />
    )
  }}
</Link>
<Link ref={ref} {...linkProps}>
  {({ isActive }) => {
    return (
      <CustomNavigation text={text} icon={icon} active={isActive} />
    )
  }}
</Link>
The links navigates correctly to different pages with different urls. Below are the links to properties: - "/sites/$siteIdentifier" - "/sites/$siteIdentifier/pageA" - "/sites/$siteIdentifier/pageB" - "/sites/$siteIdentifier/pageC" Event If i sett activeOptions.exact to true on all my Link components they are all still returning isActive true. Any ideas?
2 Replies
ratty-blush
ratty-blushOP•10mo ago
I noticed that if I use the Link component without wrapping it in a custom component and passing it to createLink() then it works as expected. Here is the code for my custom link component: 
type NavLinkProps = {
  icon: ComponentProps<typeof CustomLinkComponent>['icon']
  text: ComponentProps<typeof CustomLinkComponent>['text']
} & React.AnchorHTMLAttributes<HTMLAnchorElement>

const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(
  ({ icon, text, ...linkProps }, ref) => {
    return (
      <Link ref={ref} {...linkProps}>
        {({ isActive }) => {
          return (
            <CustomLinkComponent text={text} icon={icon} active={isActive} />
          )
        }}
      </Link>
    )
  },
)

const CreateNavLink = createLink(NavLink)
type NavLinkProps = {
  icon: ComponentProps<typeof CustomLinkComponent>['icon']
  text: ComponentProps<typeof CustomLinkComponent>['text']
} & React.AnchorHTMLAttributes<HTMLAnchorElement>

const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(
  ({ icon, text, ...linkProps }, ref) => {
    return (
      <Link ref={ref} {...linkProps}>
        {({ isActive }) => {
          return (
            <CustomLinkComponent text={text} icon={icon} active={isActive} />
          )
        }}
      </Link>
    )
  },
)

const CreateNavLink = createLink(NavLink)
wise-white
wise-white•10mo ago
are you really using such an old version?

Did you find this page helpful?