Next.js: 오류: 반응합니다.Children. 단일 React 요소 하위 항목만 수신해야 합니다.

Next.js: 오류: 반응합니다.Children. 단일 React 요소 하위 항목만 수신해야 합니다.

난 '이거'란 부품을 가지고 있어Nav안에서.components디렉토리와 그 코드는 다음과 같습니다.

import Link from 'next/link';

const Nav = () => {
    return(
        <div>
            <Link href="/">  <a> Home </a> </Link>
            <Link href="/about"> <a> About </a>  </Link>
        </div>
    )
}

export default Nav;

이 경우 다음 오류가 발생합니다.

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

하지만 만약 제가 이 버팀목을 제거한다면<a>태그가 붙어 있다.<Link>페이지를 표시할 수 있지만 콘솔에 다음 경고가 표시됩니다.

Warning: You're using a string directly inside <Link>. This usage has been deprecated. Please add an <a> tag as child of <Link>

그럼 내가 여기서 뭘 잘못하고 있는 거지?

이 문제는 다음 중 하나의 빈칸으로 인해 발생합니다.<Link>태그와<a>태그를 붙입니다.

그러니까 코드를 바꾸면

        <div>
            <Link href="/"><a> Home </a></Link>
            <Link href="/about"><a> About </a></Link>
        </div>

변경 이유:

-> 그<Link>자노드는 1개뿐이며, 여기에서는 2개의 노드 사이에 공간을 둘 수 있습니다.link그리고.a태그는 자노드로 간주됩니다.

-> 따라서 2개의 자노드가 있습니다(하나는 공간이고 다른 하나는 공간입니다).<a>태그)가 무효이기 때문에, 이러한 에러가 발생합니다.

< Link >와 <a > 사이에 공백이 있으면 "Unhandled Runtime Error: Multiple children was passed to with"라는 오류가 발생합니다.href의/단, 한 명의 아이만 지원됩니다.https://nextjs.org/docs/messages/link-multiple-children 브라우저 콘솔을 열어 컴포넌트 스택 추적을 확인하십시오."

스페이스를 떼어내면,

import Link from "next/link";

const NavBar = () => {
    return (
        <nav>
            
           <Link href="/"><a>Home </a></Link>
           <Link href="/About"><a>About </a></Link>
            <Link href="/Contact"><a>Contact </a></Link>
        </nav>
    )
}

export default NavBar

저와 같은 문제가 있었습니다.

<Link href={`/tutorial/${tutorial.slug}`}>{tutorial.title}</Link>

수정은 그것을 포장에 싸는 것이었다.a태그:

<Link href={`/tutorial/${tutorial.slug}`}><a>{tutorial.title}</a></Link>

아이가 태그일 경우 를 추가합니다.

import Link from 'next/link'

function Legacy() {
  return (
    <Link href="/about" legacyBehavior>
      <a>About Us</a>
    </Link>
  )
}

export default Legacy

정의되지 않은 구성요소로 간주되는 공간이 있습니다.

<Link href={to}><a className={'abc'}>{children}</a> </Link>

공간을 없애는 것은 괜찮았다. 경험과 인터넷의 도움 덕분에 30분밖에 걸리지 않았다.

같은 문제가 있었습니다.공간에 문제가 없고, 오히려 Link 내부에 정수를 전달하고 있었습니다.

    <Link href={{
           pathname: `/dashboard/people`,
          query: { idPerson: 123 }}}>
       {123}
   </Link>

toString() 메서드를 사용하여 정수를 해석하여 이 오류를 해결했습니다.

    <Link href={{
         pathname: `/dashboard/people`,
         query: { idPerson: 123 }}}>
      {(123).toString()}
   </Link>

내부 내용이 비어 있는지 확인합니다.

다른 답변에서 다루는 시나리오와 더불어 이 오류는 중간에 콘텐츠가 없는 경우에도 발생합니다.<Link>태그 열기 및 닫기

예를 들어 다음과 같습니다.

<Link href='/'></Link>  // i am an error

저는 NextJs 튜토리얼과 공간을 따르는 것만이 원인은 아닙니다.세미콜론도 있어요

// without space, this will also not work because of the semi-colon
    function FirstPost() {
      return (
        <>
          <h1> First Post </h1>
          <h2>
            <Link href="/">
              <a>Back to Home</a>;
            </Link>
          </h2>
        </>
      );

// with space but without semi-colon will not also work
function FirstPost() {
  return (
    <>
      <h1> First Post </h1>
      <h2>
        <Link href="/">
          <a> Back to Home </a>
        </Link>
      </h2>
    </>
  );
}

언급URL : https://stackoverflow.com/questions/61651497/next-js-error-react-children-only-expected-to-receive-a-single-react-element-c