javascript - React 17 Avertisment: Nu mă așteptam ca HTML-ul de pe server să conțină un <a> în <div>

Am citit soluțiile existente și tot nu reușesc să funcționeze.

componente/BaraDeNavigare.tsx

import { Box, Link } from "@chakra-ui/react";
import { FunctionComponent } from "react";
import NextLink from "next/link";

interface NavBarProps {}

const NavBar: FunctionComponent<any> = (props) => {
  return (
    <Box {...props} bg="tomato" w="100%" p={4} ml={"auto"} color="white">
      <NextLink href="/login">
        <Link mr={4}>Login</Link>
      </NextLink>
      <NextLink href="/register">
        <Link>Register</Link>
      </NextLink>
    </Box>
  );
};

export default NavBar;

index.tsx

import NavBar from "../components/navbar";

const Index = () => (
  <>
    <NavBar></NavBar>
    <div>hello world</div>
  </>
);

export default Index;

Captură de ecran a erorii Mesaj de eroare

Răspuns #1

Încearcă

<NavBar/>

în loc de

<NavBar></NavBar>