Roteamento no lado do cliente no React Router
Nesta lição, vamos considerar um componente importante de aplicações de página única (SPA) - o roteamento no lado do cliente. Esse roteamento nos permite atualizar o URL no navegador sem solicitações adicionais de documento do servidor.
Inicie o aplicativo que criamos na
lição anterior. Abra o painel de desenvolvedor e
nele a aba 'Rede' (Network para Chrome).
Após cada clique em nossos links, nós
vemos uma solicitação para document cada vez. Ou seja,
toda vez estamos pedindo ao servidor para carregar para nós
o document.
Vamos agora usar as vantagens
do React Router para nos livrarmos de tais
solicitações. Para isso, vamos abrir root.jsx
do nosso aplicativo e substituir a tag a
da marcação pelo componente Link. Para
começar, vamos adicionar sua importação:
import { Outlet, Link } from 'react-router-dom';
Agora substitua as tags a com o atributo
href. Em vez do pedaço de código:
<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>
Agora teremos o seguinte código:
<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>
Abra novamente a aba 'Rede' no
painel do desenvolvedor, na barra de endereços
defina o caminho raiz e atualize
a página. Agora clique nos links
e veja que o document foi solicitado
apenas uma vez durante o carregamento inicial
e nos cliques subsequentes não há mais solicitação
para o servidor.
Pegue o aplicativo criado por você nas tarefas das lições anteriores. Usando os materiais da lição, implemente nele o roteamento no lado do cliente, modificando seus links, conforme descrito na lição.
