CODEWITHSUNDEEP
javascriptreactjstypescriptreact-hooks
shineonbro
shineonbro

Reputation: 275

Forwarding Ref with href from another Component

This one is going to sound silly, but digging through an old repo of which I'm reconstructing from the ground up these days and there's this one component I'm trying to scrape in some way.

const ButtonLink = forwardRef(({ href, children, ...rest }) => (
  <Link {...rest} to={href}>
    {children}
  </Link>
));
  
const NavigationButton = (props: any) => (
  <PrimaryButton component={ButtonLink} {...props} />
);
  
const primaryItems = [
  <NavigationButton href="/">Home</NavigationButton>,
  <NavigationButton href="/dashboard">Dashboard</NavigationButton>,
];

Edit: I'm using atlaskit and <PrimaryButton> is apart of @atlaskit/atlassian-navigation but I'm trying to create a custom component which utilizes <Link to="x"> for a smoother transition to the other page versus <PrimaryButton href="x"> which forces the page to reload.

TypeScript TopNav.tsx(80,34):
Property 'href' does not exist on type '{ children?: ReactNode; }'.  TS2339

    78 | 
    79 | 
  > 80 | const ButtonLink = forwardRef(({ href, children, ...rest }) => (
       |                                  ^
    81 |   <Link {...rest} to={href}>
    82 |     {children}
    83 |   </Link>

Upvotes: 1

Views: 167

Answers (1)

codingwithmanny
codingwithmanny

Reputation: 1184

You'll need to type define the href for the ButtonLink. Right now it doesn't under how to process it. Here's the code that I got working on my end.

interface ButtonLinkProps {
    children?: React.ReactNode;
    href: string;
}

const ButtonLink = forwardRef(({ href, children, ...rest } : ButtonLinkProps, ref) => {
  return <Link {...rest} to={href}>{children}</Link>
})

Upvotes: 1

Related Questions