NextJS 错误消息：道具类型失败：道具 `href` 需要 `<Link>` 中的 `string` 或 `object`，但却得到 `undefined`

Question

我正在将 GatsbyJS 项目的标头实施到 NextJS 项目中，并收到以下错误消息：

“错误：道具类型失败：道具

href

期望在

string

中出现

object

或

<Link>

，但得到了

undefined

。”

从 header.jsx 中删除以下内容时，它不会提供任何错误消息：

你能指导我做错什么吗？

这是我的 header.jsx 文件：

import React, { useEffect, useRef, useState } from "react";
import styled from "styled-components";
import Link from "next/link";
import { menuData } from "../../data/menuData";
import MenuButton from "../buttons/MenuButton.jsx";
import Image from "next/image";
import MenuTooltip from "../tooltips/MenuTooltip";

export default function Header() {
  const [isOpen, setIsOpen] = useState(false);
  const ref = useRef();
  const tooltipRef = useRef();

  function handleClick(event) {
    setIsOpen(!isOpen);
    event.preventDefault();
  }

  function handleClickOutside(event) {
    if (
      ref.current &&
      !ref.current.contains(event.target) &&
      !tooltipRef.current.contains(event.target)
    ) {
      setIsOpen(false);
    }
  }

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  return (
    <Wrapper>
      <Link href="/">
        <Logo>
          <Image
            src="/images/logos/logo.png"
            alt="Logo"
            width={120}
            height={100}
          />
        </Logo>
      </Link>
      <MenuWrapper count={menuData.length} ref={ref}>
        {menuData.map((item, index) => (
          <MenuButton key={index} item={item} />
        ))}
        <HamburgerWrapper onClick={(event) => handleClick(event)}>
          <MenuButton item={{ icon: "/images/icons/hamburger.svg" }} />
        </HamburgerWrapper>
      </MenuWrapper>
      <div ref={tooltipRef}>
        <MenuTooltip isOpen={isOpen} />
      </div>
    </Wrapper>
  );
}

这是我的 menuTooltip.jsx 文件：

import React from "react";
import styled from "styled-components";
import { tooltipData } from "../../data/menuData";
import MenuButton from "../buttons/MenuButton";

export default function MenuTooltip(props) {
  const { isOpen } = props;
  return (
    <Wrapper isOpen={isOpen}>
      {tooltipData.map((item, index) => (
        <MenuButton key={index} item={item} />
      ))}
    </Wrapper>
  );
}

这是我的 MenuButton.jsx 文件：

import React from "react";
import styled from "styled-components";
import Link from "next/link";
import { Caption } from "../styles/TextStyles";

export default function MenuButton(props) {
  const { item } = props;
  return (
    <Link href={item.link} onClick={props.onClick} key={props}>
      <MenuItem hasTitle={!item.title ? false : true}>
        <img src={item.icon} />
        {item.title}
      </MenuItem>
    </Link>
  );
}

这是我的 menuData.jsx 文件：

export const menuData = [
  { title: "Learn", icon: "/images/icons/learner02_dm.svg", link: "/learn" },
  {
    title: "Articles",
    icon: "/images/icons/article_light.svg",
    link: "/articles",
  },
  {
    title: "Community",
    icon: "/images/icons/community_light.svg",
    link: "/community",
  },
  {
    title: "Entrepreneurs",
    icon: "/images/icons/business02_light.svg",
    link: "/entrepreneurs",
  },
];

export const footerMenuData = [
  { title: "Learn", icon: "/images/icons/learner02_dm.svg", link: "/learn" },
  {
    title: "Articles",
    icon: "/images/icons/article_light.svg",
    link: "/articles",
  },
  {
    title: "Community",
    icon: "/images/icons/community_light.svg",
    link: "/community",
  },
  {
    title: "Entrepreneurs",
    icon: "/images/icons/business02_light.svg",
    link: "/entrepreneurs",
  },
  {
    title: "Updates",
    icon: "/images/icons/calendar_light.svg",
    link: "/updates",
  },
  {
    title: "Help",
    icon: "/images/icons/help_light.svg",
    link: "/help",
  },
];

export const tooltipData = [
  { title: "Learn", icon: "/images/icons/learner02_dm.svg", link: "/learn" },
  {
    title: "Articles",
    icon: "/images/icons/article_light.svg",
    link: "/articles",
  },
  {
    title: "Community",
    icon: "/images/icons/community_light.svg",
    link: "/community",
  },
  {
    title: "Entrepreneurs",
    icon: "/images/icons/business02_light.svg",
    link: "/entrepreneurs",
  },
];

Answer 1

你在链接中添加一个标签 a :

<link href....> 
  <a> 
    <image> 
    <p> text </p> 
  </a> 
</link>

我也经常遇到这个错误...

Answer 2

对于从 react-router-dom 迁移到 next.js 内置链接组件的任何其他人。
这个错误发生在我身上，因为我正在从 react-router-dom 迁移到 Next.js 中的内置 Link 组件，而我忘记将

to=""

组件中的

<Link></Link>

属性更改为

href=""

Answer 3

天哪！我被这个问题困扰了很长时间，终于设法解决了。虽然我很高兴接受的答案对你有用，但遗憾的是它不适合我。因此，我将在 NextJS 官方 GitHub 存储库的 discussion thread 上找到的修复留在这里。

而不是将链接密钥直接传递到

Link

的

href

道具：

<Link href={item.link} {...other props}>...</Link>

像这样在字符串文字中传递它：

<Link href={`${item.link}`} {...other props}>...</Link>

如果需要，您可以将

Link

组件的子项包装在

<a>

标签中，但这不是必需的，我的工作没有那个。仅供参考，我在

Link

组件中有一些 SVG 图标，这些图标引起了所有这些大惊小怪。叹息！

Answer 4

像这样传递一个字符串：

<Link href='your-link-here.com'> YOUR CONTENT HERE </Link>
<Link href='#'> YOUR CONTENT HERE </Link>

或

像这样将其作为对象传递：

<Link href={item.link}> YOUR CONTENT HERE </Link>