Como implementei o roteamento do lado do cliente em meu aplicativo React
Quando comecei a aprender o Client Side Routing, me senti como se tivesse entrado em um labirinto pela primeira vez. Ao continuar neste labirinto, fiquei desorientado e confuso. Aqui vou esclarecer algumas confusões que tive ao trabalhar com o roteador react e algumas coisas sobre roteamento em geral. Também trabalharemos juntos na implementação de alguns componentes do roteador react em um aplicativo react.
O que é roteamento?
O roteamento é o processo de seleção de um caminho para o tráfego em uma rede ou entre várias redes .
Eu gosto de pensar de roteamento como st e pping para um caminho que foi traçado para chegar a um destino específico. Ao percorrer esse caminho, existem outros caminhos possíveis que você pode seguir para chegar ao seu destino.
O que é roteamento do lado do servidor?
Em termos de roteamento, todo o roteamento é feito no lado do servidor e o que foi solicitado será exibido pelo cliente. Quando um usuário digita algo na barra de endereço ou clica em um link, a ação ao fazer isso resultará em uma solicitação HTTP GET. Se o servidor for alcançado, ele enviará uma página index.html e todas as informações relacionadas a essa página. Se o usuário clicar em um link dentro desse endereço ou inserir manualmente o endereço, um servidor enviará uma resposta.
O que é roteamento do lado do cliente?
Em termos de roteamento, a maioria do roteamento normalmente é tratada pelo cliente. Com o roteamento do lado do cliente, ao fazer inicialmente uma solicitação HTTP GET, toda a página da web será carregada no cliente. Sempre que um usuário clica em um link que direciona para algum lugar dentro da página, o roteamento será tratado pelo cliente sem fazer uma solicitação HTTP GET adicional ao servidor. Normalmente, o roteamento do lado do cliente é usado em aplicativos de página única.
Começando
Se você gostaria de acompanhar ou resolver isso por conta própria. O que este aplicativo faz é rastrear despesas de estoque. Sempre que você adicionar um item ao estoque, ele atualizará os totais relacionados à quantidade e ao preço desse item.
Aqui estão alguns resultados que você pode implementar:
Inicialize o roteador React para ser usado por todo o aplicativo
Crie links para casa, inventário e novo componente NavBar
Crie rotas a partir de links NavBar no componente App
Reutilize o componente ItemForm para editar um item
Sempre que um item é adicionado ao inventário ou editado, a página irá direcionar de volta para o inventário
BrowserRouter
BrowserRouter é o que inicializa o uso do roteador react em nossa aplicação em um ambiente de navegador que ajuda a manter a interface do usuário em sincronia com a URL. BrowserRouter é como pegar um pedaço de papel em branco para começar a desenhar um mapa para seus componentes. No estado atual de nosso aplicativo, não temos recursos de roteamento e onde precisamos adicionar BrowserRouter está no nível superior de nosso aplicativo em index.js .
NavLink / Link
Fornece navegação declarativa e acessível em seu aplicativo.
No contexto de um mapa, o Link será a estrada que leva a um destino. Link e NavLink fornecem a mesma funcionalidade. A única diferença é que você pode adicionar um atributo activeStyle ao NavLink. Quando o url corresponder ao ponto final do NavLink, ele ativará o activeStyle. Vamos implementar o componente NavBar usando o NavLink.
Para dar algum contexto sobre os atributos:
exato é um valor booleano definido como verdadeiro quando o prop é passado e diz ao navegador para corresponder exatamente a este caminho. Isso ajuda com activeStyle a garantir que “/” não corresponda a “/ novo” ou “/ inventário” quando ativo.
to é o ponto final de destino para o qual você deseja que a página da web vá.
style / activeStyle é o estilo dos links que estão inativos ou ativos
Sempre que você clica em um dos links na NavBar, você deve ver uma mudança na URL como esta
URL atual: localhost: 3000
URL atual: localhost: 3000 / inventário
URL atual: localhost: 3000 / novo
Componente de rota com interruptor
Para continuar com a nossa metáfora do mapa, se você decidir viajar por um caminho específico, uma vez que tenha alcançado o ponto final, você será capaz de ver a área circundante naquele destino. A Rota é o destino e a área circundante são os filhos da Rota. Esses filhos também podem conter Rotas. Switch restringe você de percorrer vários caminhos ao mesmo tempo.
Uma maneira de pensar no Switch é como uma instrução switch em Javascript.
switch (caminho) {
case '/':
<Home />
break;
caso '/ inventário':
<InventoryPage />
quebra;
case '/ new':
<ItemForm />
break;
padrão:
<h1> 404 não encontrado! </h1>
}Vamos implementar nosso Switch e Route em nosso componente App
Sempre que você clica em um link na NavBar, ele deve renderizar componentes que são filhos de uma rota específica que corresponda à URL atual. Também adicionei um caminho curinga “/ *” para corresponder a qualquer outro url que não foi especificado.
Reutilização de componentes
Digamos que quando clicamos em um link para editar o item atual, queremos reutilizar o componente ItemForm de uma forma que não resulte na adição de outro item e não no mesmo caminho que “/ novo”. Em vez disso, quando clicamos no link dentro do cartão do item, isso resultará em um caminho como “/ editar” e o formData se tornará os dados do item atual. Isso pode ser um pouco complicado, mas os componentes que usaremos para implementar serão App, Item e ItemForm. Os ganchos do React Router que usaremos são useParams e useRouteMatch
Vamos começar adicionando um caminho de rota para ‘edit /: name’ para o componente App. O “: name” será a chave de propriedade do objeto que é retornado ao invocar o gancho useParams do Roteador React. Em vez de passar handleAddItem para o parâmetro onAddItem , passaremos handleItemEdit para onAddItem para alguma reutilização.
Agora que temos nossa Rota, vamos implementar nosso Link para editar um item. Decidi adicionar o link de edição a um ícone no cabeçalho do cartão.
Quando vinculamos ao ponto final de “./edit/${name}”, o valor de “name” será o valor da propriedade name dentro do gancho useParams.
Quando você clica no link de edição, o nome do item de inventário deve ser o ponto final do url, assim:
Agora que temos nosso Link funcionando. Vamos agora implementar nosso componente ItemForm para ser reutilizável para adicionar itens e editar itens.
Como implementamos isso, usamos o valor do gancho useParams. Usamos o valor de “nome” para ver se o item está contido no estoque. Se for, precisamos usar o gancho useEffect para executar sempre que uma variável muda de estado que é dependente do gancho useEffect, colocando as variáveis na matriz de dependências.
O que o condicional (nome && containsItem) está verificando para ver se o nome está definido e também se o nome está contido no inventário. Se o nome existir no inventário, os dados do formulário serão definidos para os dados do item.
Quando eu não tinha a instrução else anexada à instrução if dentro de useEffect, encontrei um bug em que se você clicar no link Novo na NavBar, os dados dentro do formulário ainda estariam lá ao clicar para editar um item. A instrução else existe para garantir que, se deixarmos a edição sem fazer alterações, os dados do formulário se tornarão campos de entrada vazios.
A condição no final é certificar-se de dar ao usuário uma mensagem se ele digitar manualmente a url para editar um item que não existe no estoque.
useHistory Hook
Este gancho retorna um objeto que permite trabalhar com o histórico da web de um usuário em sua guia atual. Como usaremos este gancho é quando um usuário edita um item ou adiciona um item ao inventário, o usuário será movido para o ponto final ‘/ inventário’.
Aqui, estamos adotando uma abordagem otimista quando nossos dados de formulário são enviados com êxito. Com sucesso, usaremos o objeto useHistory para empurrar o usuário para ‘/ inventário’. Isso colocará o endereço atual no topo da pilha de histórico.
Resumo
Em nosso contexto de mapa usando React Router, BrowserRouter era o mapa em si, Link / NavLink é a direção para o destino, Route é o que você vê quando chega a esse destino, useHistory são as etapas rastreadas executadas para chegar ao destino.
