Após configurar o roteamento básico, implementar o carregamento preguiçoso e adicionar componentes de fallback, o próximo passo essencial é fornecer aos usuários meios para navegar entre as páginas do nosso aplicativo.

O React Router oferece os componentes Link e NavLink, análogos à tag HTML a. Esses componentes permitem atualizar a URL na barra de endereços do navegador sem recarregar toda a página.

import { Link } from "react-router-dom";

<Link to="path_value">Any text</Link>

• A propriedade to especifica a rota ou caminho de destino para o qual o link deve navegar. Substitua path_value pelo caminho desejado;
• Any text é o conteúdo que será exibido como o link. Você pode substituir por qualquer texto ou conteúdo JSX desejado.

Exemplo

Vamos criar um componente separado chamado Bar para gerenciar a navegação de todo o aplicativo. Veja o código:

const Bar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contacts">Contacts</Link>
        </li>
      </ul>
      <hr />
    </nav>
  );
};

Este código define um componente funcional chamado Bar, que representa uma barra de navegação. Ele renderiza um elemento <nav> contendo uma lista não ordenada <ul> com três itens de lista <li>. Cada item de lista inclui um componente Link da biblioteca react-router-dom.

• Linha 6: O primeiro componente Link representa um link para a página "Home";
• Linha 9: O segundo componente Link representa um link para a página "About";
• Linha 12: O terceiro componente Link representa um link para a página "Contacts".

Esses componentes Link permitem a navegação dentro da aplicação atualizando a URL na barra de endereços do navegador sem recarregar a página. Quando um usuário clica em um link, a rota ou caminho correspondente é ativado e o componente associado será renderizado.