Benefícios do <NavLink> vs <Link> do React Router v4

97

Além da capacidade de definir um "activeClassName" e "activeStyle" no NavLink, há alguma razão para usar o NavLink sobre o link ao criar links para outras rotas em elementos não navegacionais (ou seja, não nav principal no cabeçalho ou rodapé) em seu site que não precisa de um estado / classe ativo?

yam55
fonte
4
Não posso comentar diretamente no TOUMI (porque não tenho 50rep), então vou adicioná-lo aqui. NavLinkmantém o foco adequado na página para acessibilidade. Ao usar o link, o foco inicial é perdido no carregamento da página e você também notará que a tabulação nos menus suspensos também é interrompida durante o uso Link. O NavLink corrige isso.
DJNorris

Respostas:

142

A documentação oficial é clara:

<NavLink>

Uma versão especial do <Link>que adicionará atributos de estilo ao elemento renderizado quando ele corresponder ao URL atual.

Portanto, a resposta é NÃO . Não há outros motivos, exceto o mencionado.

Abdennour TOUMI
fonte
44

Quando você precisa usar atributos de estilo ou classe no ativo <Link>, você pode usar<NavLink>

Vamos ver o exemplo:

Ligação

<Link to="/">Home</Link>

NavLink

<NavLink to="/" activeClassName="active">Home</NavLink>
sultão aslam
fonte
7

Componente de Link

Ele é usado para criar links que permitem navegar em URLs diferentes e quando clicamos em qualquer um desses links em particular , ele deve carregar a página que está associada a esse caminho sem recarregar a página. Exemplo:

insira a descrição da imagem aqui

Componente NavLink:

Se quisermos adicionar alguns estilos ao Link. Para que, ao clicarmos em um determinado link, seja facilmente identificado qual Link está ativo. Para esta reação, o roteador fornece NavLink em vez de Link . Agora substitua Link do Navlink e adicione as propriedades activeStyle . As propriedades activeStyle significam que quando clicamos no Link, ele deve ser destacado com um estilo diferente para que possamos diferenciar qual link está ativo no momento. Exemplo:

insira a descrição da imagem aqui

Ref: https://www.javatpoint.com/react-router

Santosh Singh
fonte
5

Simplesmente, quando você usa, <Link>não há nenhuma classe ativa no elemento selecionado.
Em contraste, com <NavLink>o elemento selecionado é destacado porque este elemento é adicionado a uma classe ativa.
Espero que seja útil para você.

Neo_
fonte
Alguns exemplos de código ajudarão os usuários. Da avaliação
Vaibhav Vishal