Далее. js: Ошибка: ожидается, что React.Children получит только один дочерний элемент React

Question

У меня есть компонент под названием 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>

Так что я здесь делаю не так?

Answer 1

Эта проблема связана с пробелом между тегами <Link> и <a>.

Поэтому измените свой код, например,

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

Причина изменение:

-> У <Link> может быть только один дочерний узел, и здесь пространство между тегами link и a считается дочерними узлами.

-> Итак, есть два дочерних узла (один - пробел, а другой - тег <a>), которые недопустимы, и поэтому возникает такая ошибка.