Gerenciamento de rotas com o React

Quando estamos criando uma determinada aplicação é normal arquitetarmos alguns pontos essenciais para seu funcionamento. Uma destas questões envolve quantas páginas nosso site terá e como ocorrerá a navegação entre elas. Para isso, o React possui uma biblioteca incrivelmente eficaz no que se oferece a fazer e que torna simples a manipulação de rotas: o React Router Dom.

Neste artigo, entenderemos as principais vantagens e formas de implementação que esta biblioteca nos proporciona, bem como criaremos do zero uma aplicação que utilize esta forma de gerenciamento de rotas.

Primeiros passos

O React Router Dom é simples de utilizar e entender e, talvez por isso, seja a biblioteca mais conhecida para este tipo de demanda no ramo da programação front-end voltada ao React. Para entendermos melhor seus conceitos e como podem ser aplicados, criaremos um projeto onde será criado um site com quatro páginas. Estas páginas serão gerenciadas pela versão 5 da biblioteca mencionada.

Para criar um projeto React e instalar o React Router Dom, utilizaremos os seguintes comandos:

npx create-react-app router-dom

cd project-react-redux

npm install

npm install react-router-dom@v5

npm start

Precisamos de páginas para criar uma navegação entre rotas com a biblioteca em questão. Desta forma, no exemplo que será abordado neste artigo, criaremos três páginas que possuem algumas informações que serão melhor abordadas mais adiante. Por enquanto, não se preocupe com o conteúdo: basta saber que possuímos três páginas distintas sem nenhuma conexão entre elas:

A partir de agora, iremos começar a relacionar as páginas de forma que seja possível alternar entre elas sem nenhuma dificuldade. Para isto, entenderemos as funcionalidades dos componentes BrowserRouter, Switch, Route e Link, todos estes concedidos pela biblioteca em questão.

BrowserRouter

O primeiro passo para a utilização do React Router Dom é o uso do componente BrowserRouter. Este é o componente principal e essencial para que todo o roteamento efetivo entre as páginas seja criado. Tudo o que utilizará rotas precisa ficar dentro dele e, por este motivo, geralmente o colocamos na maior hierarquia possível de componentização. No nosso caso, o Browser Router ficará no arquivo index.js do projeto, importado do react-router-dom:

Switch

O Switch é o componente que receberá em seu conteúdo todas as rotas que criaremos. Para cada página que queremos em nossa aplicação, criamos um elemento Route dentro do Switch. Este último por sua vez é responsável por varrer todos os elementos dentro dele e encontrar a rota escolhida, com o intuito de que o usuário seja direcionado para a página que escolheu.

Route

O Route é o componente que vincula um caminho url e um componente. Ele possui duas propriedades principais, das quais sempre serão utilizadas em aplicações que estão utilizando o React Router Dom.

O path é a propriedade que recebe o endereço que criaremos para inicializar determinado componente de página. Seu valor sempre será uma string onde o primeiro caractere sempre é um ‘/’. Recomenda-se utilizar a propriedade exact antes do path, com o intuito de evitar que haja qualquer problema relacionado a se utilizar um endereço indevido para um componente.

O component é a segunda propriedade essencial que receberá como valor o componente que será roteado ao usarmos o endereço informado na propriedade path.

Implementando o Switch e os componentes Route

Para nosso exemplo, iremos repassar por meio do Route os endereços “/” para o componente Inicio, “/categorias” para o componente Categorias e “/produtos” para o componente Produtos. Assim como o BrowserRouter, os componentes serão importados de react-router-dom. O Switch que terá os Route deve estar dentro do componente que foi encapsulado pelo BrowserRouter. No nosso caso, dentro de App:

É oficial: criamos nosso primeiro roteamento de páginas com o React Router Dom. Se digitarmos na url do nosso projeto um dos endereços que criamos no path de um Route, nossa página já será direcionada para o componente relacionado. Todavia, ninguém vai ficar clicando na url de navegação a todo momento e digitando o endereço para onde quer ir sempre que quiser mudar de página, concorda? É por isso que existe o componente Link.

Link

O Link disponibiliza a navegação por url sem que a página recarregue, diferente da tag a. Esta característica é muito importante para uma aplicação React, visto que muitas informações temporárias (como por exemplo estados) são simplesmente perdidas e resetadas quando atualizamos a página.

Para especificar qual endereço queremos que o Link nos direcione, basta repassarmos para a propriedade to os endereços que criamos nos componentes Route. Para entender melhor a aplicação do Link, vamos criar uma barra de navegação no nosso site, que contenha um Link para cada página que possuímos:

Propriedades do React Router Dom

Todo componente Route criado dentro do Switch passa a ter algumas características incríveis. Além de ser possível o translado entre estas páginas, eles também recebem propriedades importantíssimas para o processamento de informações das rotas. Faça você mesmo esta verificação: vá até o componente Inicio, insira props como parâmetro recebido da função e o exiba em tela por meio de um console.log:

Você perceberá que magicamente surgirão três propriedades na página que criamos. Veja:

Na realidade, devo confessar que não é por pura magia que recebemos estas propriedades. O history, o match e o location são automaticamente criados pelo React Router Dom. Entenderemos um pouco a respeito deles:

Propriedade history

Nesta propriedade são encontradas informações sobre o histórico de navegação da aplicação. Como foi dito, ao alternar entre as páginas, não atualizamos o browser para não perder possíveis informações registradas temporariamente. Desta forma, como não há um reload na página, o nosso browser não registra o histórico de navegação. Para que estas informações não se percam, existe a propriedade history.

Propriedade match

Possui informações referentes à url da nossa aplicação. Por meio dela é possível até mesmo passar parâmetros, como veremos mais adiante.

Propriedade location

Representa o local onde o usuário se encontra no momento, assim como também para onde este deseja ir e até mesmo onde se encontrava.

É super válido criar um exemplo utilizando pelo menos uma destas propriedades. Para o exemplo em questão, usaremos o match. Primeiramente, vamos entender melhor nosso componente um determinado arquivo JSON criado para Produtos, assim como este componente:

Vamos destrinchar algumas informações sobre os arquivos acima antes de mais nada: primeiramente, temos um arquivo JSON que possui um array com dez objetos. Estes por sua vez contém as chaves nome, id, custo, categoria e imagem. Este array é mapeado no componente Produtos, onde é criado um elemento para cada objeto dentro do array.

Imagine que, ao clicar em cada produto, queremos que uma nova página seja carregada, com informações específicas daquele item que foi escolhido. Seria completamente inviável ter que criar uma página no Switch para cada item que temos, concorda? Agora avalie criar uma página para cada um dos cem itens que existem em um determinado catálogo de vendas. Impossível! Para isto, o React Router Dom nos fornece a possibilidade de criar rotas dinâmicas, com o uso de dois pontos logo após o “/” do endereço no Route. Veja o exemplo:

Criamos uma rota na linha 17 que nos direciona para um componente chamado Detalhes (que, neste primeiro momento, iremos ignorar o que há em seu conteúdo). O que estamos dizendo ao implementar um endereço “/produtos/:id” é que, após os dois pontos, o que será encaminhado é dinâmico e pode mudar, mas sempre deve ser direcionado para a mesma página, que é Detalhes. Ficou confuso? Calma, vamos devagar.

Primeiro, vamos substituir a div principal deste componente por um Link que nos encaminhe para Detalhes, passando dinamicamente o id do produto pela url:

Da forma como fizemos na linha 10, sempre que clicarmos em um produto, seremos direcionados para a página Detalhes e o que vem depois de “/produtos/” dependerá do que escolhermos selecionar.

É um pouco lógico que se passamos parâmetros que não são fixos, podemos coletá-los para fazer alguma coisa. É finalmente aqui que entra o match. Primeiro, vamos exibir com um console.log para as propriedades de Detalhes, assim como fizemos em Inicio, com a diferença de que desta vez selecionaremos apenas uma chave chamada params, localizada dentro do match:

A primeira informação que temos a respeito de params é que ele é um objeto com uma chave: id. A segunda, é que este id possui justamente a informação que nós passamos como parâmetro no componente Produtos! Desta forma, podemos utilizar este valor para trazer informações do produto específico que possui este id, seja por meio de uma requisição a um JSON ou um banco de dados ou ainda, no nosso caso, filtrando as informações do arquivo JSON e trazendo apenas o item relacionado.

Considerações finais

O React Router Dom nos proporciona diversas funcionalidades. Se você começar a explorar as propriedades match, history e location, verá que existem diversas e diversas ferramentas dentro destes objetos, de modo que seria inviável mostrar todas em um único artigo. Por este motivo, focamos em uma das mais importantes dentre todas elas.

Desenvolver é repetir diversas vezes com diversos exemplos diferentes até aprender, então não poupe esforços em utilizar esta biblioteca, pois sem dúvida ele fará parte do seu dia a dia de programador.