2
respostas

a tag <a> não e mais necessária

A tag não e mais necessária, trazendo um erro até

Fiz desta forma agora

<Link href="/fac"> 
    fac
 </Link>

Apenas um exemplo

2 respostas

Olá Flavio, tudo bem contigo?

Bom como você percebeu já a tag <a> vai trazer um erro se colocada ai, contudo ela ainda é necessária sim, a única diferença é que agora ele pode ser reutilizado várias vezes usando o nome Link no lugar, mas se você entrar na pasta de components que está ou deveria estar dentro da pasta src você vai encontrar uma pasta chamada "LinkEstilizado", que possui esse trecho de código:

import React from 'react';

const LinkEstilizado = React.forwardRef(({ onClick, href, children }, ref) => {
  return (
    <a href={href} onClick={onClick} ref={ref} style={{ color: 'red' }}>
      {children}
    </a>
  );
});

export default LinkEstilizado;

E como você pode ver esse trecho possui uma tag <a>, com algumas partes que devem ser preenchidas pelo programador.

E como você vê ele exporta a const LinkEstilizado e essa por sua vez é chamada na pasta Link que possui esse código:

// Componente Link
import NextLink from 'next/link';
import LinkEstilizado from '../LinkEstilizado';

export default function Link({ children, href, ...props }) {
  return (
    <NextLink href={href} passHref>
      <LinkEstilizado {...props}>{children}</LinkEstilizado>
    </NextLink>
  );
}

E você pode perceber que ele importa o LinkEstilizado da outra pasta com a tag <a>, e esse arquivo por sua vez exporta a function Link com propriedades livres para preenchimento do programador.

Enfim chegamos nesse código que você postou aqui:

<Link href="/fac"> 
    fac
 </Link>

Assim podemos dizer que esse código, na verdade, é um compilado de outros códigos que dependem um do outro, mas que na raiz tem uma tag <a> que os regem.

E assim pode-se concluir que ao colocar uma tag <a> ali dentro do código que deve ter somente propriedades para preencher os outros arquivos que requisitam props para funcionarem e gerarem um link, o compilador vai dar erro e impedir o código de funcionar.


OBS: talvez os códigos que eu coloquei não estejam iguais os seus tá, isso pode acontecer por conta de algumas diferenças entre nossos ambientes de execução, versões de ferramentas, entre outras, então se algo que eu coloquei estiver deferente do seu e do passado no curso não se preocupe tá isso foram algumas adaptaçoes que eu fiz tá ;)


Em suma era isso, entendeu o porquê não precisamos mais da tag <a> e que se colocar ela ali vai gerar um erro?

Caso não tenha entendido algo me dê um retorno que eu explico de outra forma!

Continue se dedicando em seus estudos e caso tenha dúvidas, estarei à disposição para te ajudar!

Abraços e bons estudos.

Possível solução:

Hoje em dia possível invocar o comportamento antigo do next contendo um componente Link com uma tag A como filha, apenas passando dentro da propriedade do link o atributo: legacyBehavior: teremos o seguinte código (Lembrando que o atributo passHref serve para manter a compatibilidade):

          <Link passHref legacyBehavior href="/">
            <a >ir para o faq</a>
          </Link>

Já em src/components/Link, ficará:

import NextLink from "next/link";

export default function Link({children, href, ...props}) {
  return(
    <NextLink passHref legacyBehavior href={href} >
        <a {...props}>{children}</a>
    </NextLink>
  )
}

Espero de alguma forma ter contribuido com aprendizado de todos!

Bons estudos, abraço!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software