propblem with Link in next js with type script: The prop `href` expects a `string` or `object` in `&-CodePudding

i have this code about Customized link component, i did this by type script:

...
const NavLink: React.FC<{
  activeClassName: string;
  className: string;
  href: string;
  clickEvent?: MouseEventHandler;
  onClick?: MouseEventHandler;
  title: string;
}> = (children, props) => {...}

this is my link component line:

<Link href={props.href} onClick={props.clickEvent} passHref>

this how i call the component:

<NavLink
                href='/'
                className={styles.navlink}
                activeClassName={styles.navlink__active}
                title='my link'
              />

i got the error in title. any help?

CodePudding user response：

This is happening because of the way you received the props from your component.

When using React, you must always receive the props as the first parameter of the functional component.

In your case, you first received children and then props as the second parameter, but this should be only one parameter because the children property is also received as props.

An easy way to fix that is desestructuring the children and using the rest operator to still receive the rest of the props as a variable named props, like the following example:

const NavLink: React.FC<{
  activeClassName: string;
  className: string;
  href: string;
  clickEvent?: MouseEventHandler;
  onClick?: MouseEventHandler;
  title: string;
}> = ({ children, ...props }) => {...}

This should keep the variables with the same name, but now you would be desestructuring both the children and all the props from the first parameter of the Functional Component.