Reactjs React.Children.仅应接收单个React元素子元素。插入组件时出错

我得到以下错误：

React.Children.only expected to receive a single React element child.

我已经找到了导致错误的组件，但我不确定错误在哪里，因为组件中的所有项都已包装在一个div中。下面是父组件：

    return(
        <div className="Layout">
        <Meta/> 
        <Navbar/> <--- Component causing me trouble.
        {props.children}
        </div>

    )

返回(
根据，链接

组件不能有多个子组件

但是，您可以将一个

a

标记放在

链接中，并将多个子项放在
a
中

<Link href="#">
  <a>
    <div>ch1</div>
    <div>ch2</div>
    <div>ch3</div>
  </a>
</Link>


ch1
亚甲基
甲基
尝试添加堆栈跟踪请共享
NavButton
的代码以及Next.js？Yes@ElAoutarHamzaA god中添加的堆栈跟踪和按钮codeIs
链接
{ Invariant Violation: React.Children.only expected to receive a single React element child.
    at C:\Users\xxx\Documents\GitHub\xxx\node_modules\react\cjs\react.development.js:1327:26
    at Object.onlyChild [as only] (C:\Users\xxx\Documents\GitHub\xxx\node_modules\react\cjs\react.development.js:1330:5)
    at Link.render (C:\Users\xxx\Documents\GitHub\xxx\.next\server\static\development\pages\dashboard.js:682:35)
    at processChild (C:\Users\xxx\Documents\GitHub\xxx\node_modules\react-dom\cjs\react-dom-server.node.development.js:3171:18)
    at resolve (C:\Users\xxx\Documents\GitHub\xxx\node_modules\react-dom\cjs\react-dom-server.node.development.js:3013:5)
    at ReactDOMServerRenderer.render (C:\Users\xxx\Documents\GitHub\xxx\node_modules\react-dom\cjs\react-dom-server.node.development.js:3436:22)
    at ReactDOMServerRenderer.read (C:\Users\xxx\Documents\GitHub\xxx\node_modules\react-dom\cjs\react-dom-server.node.development.js:3395:29)
    at renderToString (C:\Users\xxx\Documents\GitHub\xxx\node_modules\react-dom\cjs\react-dom-server.node.development.js:3954:27)
    at render (C:\Users\xxx\Documents\GitHub\xxx\node_modules\next-server\dist\server\render.js:79:16)
    at renderPage (C:\Users\xxx\Documents\GitHub\xxx\node_modules\next-server\dist\server\render.js:255:20)
    at C:\Users\xxx\Documents\GitHub\xxx\.next\server\static\development\pages\_document.js:437:17
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\xxx\Documents\GitHub\xxx\.next\server\static\development\pages\_document.js:206:24)
    at _next (C:\Users\xxx\Documents\GitHub\xxx\.next\server\static\development\pages\_document.js:228:9)
    at C:\Users\xxx\Documents\GitHub\xxx\.next\server\static\development\pages\_document.js:235:7
    at new Promise (<anonymous>) name: 'Invariant Violation' }

interface Props{
    key: string,
    icon: string,
    label: string,
    path: string,

}

const NavButton = (props:Props) => (

    <Link href={props.path}>

      <div className="NavButton">

        <span className="Label">{props.label}</span>
      </div>
      <style jsx>
        {`
        .NavButton {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;

          height: 100%;

          cursor: pointer;
        }

          .Label {
            font-size: 12px;
            text-transform: capitalize;
          }

        `}
      </style>
    </Link>


  );

  export default NavButton;

<Link href="#">
  <a>
    <div>ch1</div>
    <div>ch2</div>
    <div>ch3</div>
  </a>
</Link>