React Router Dom v6 - O que mudou?

É natural esperar que tecnologias sofram atualizações. A cada dia que passa, o conhecimento da humanidade aumenta exponencialmente e, consequentemente, algumas funcionalidades, frameworks, bibliotecas e afins tornam-se obsoletas, ou no mínimo dignas de um upgrade. Foi isso o que aconteceu com a ferramenta mais utilizada atualmente para o gerenciamento de rotas em React: o React Router Dom, que ganhou uma sexta versão. Com ela, ocorreram algumas mudanças dignas de nota, das quais abordaremos neste artigo. Sendo assim, se você que era usuário da quinta versão e teve dúvidas ao utilizar a sexta, não se preocupe, hoje você vai sair daqui sabendo tudo o que é necessário para desenvolver utilizando a versão mais recente do React Router Dom.

OBS - Anteriormente, foi publicado um artigo direcionado ao gerenciamento de rotas com React, onde fizemos um passo a passo de como utilizar a quinta versão. É muito interessante (caso você não conheça nenhuma das duas ou queira revisar a versão anterior) você dar uma conferida lá e depois voltar para cá. Entretanto, como já foi dito, tudo o que você precisa para desenvolver com esta versão mais recente está aqui.

Antes de mais nada, o que é o React?

O React é uma biblioteca Javascript de código aberto e utilizada por diversas empresas gigantes, como o facebook, a netflix, o Instagram, etc. Focado em criar interfaces para o usuário de maneira muito mais prática do que utilizando o Javascript puro, o React foi ganhando mais e mais espaço por ser de fácil assimilação, compreensão e adaptação.

Um breve resumo sobre o React Router Dom

O React Router Dom é uma biblioteca para uso no React, onde é possível realizar o gerenciamento de rotas entre as páginas de um site, sendo capaz de proporcionar alta escalabilidade e simplicidade. Por meio dela, é possível renderizar componentes baseado na rota que for escolhida pelo usuário, além de manipular parâmetros passados via URL.

Primeiros Passos

Uma das maiores verdades que carrego na vida é a de que a melhor forma de aprender sobre algo é colocando as mãos à obra para praticar. Desta forma, te convido a criar um projeto React comigo, executando o seguinte comando no terminal:

npx create-react-app react-router-dom-6

cd react-router-dom-6

npm install react-router-dom

npm start

OBS - Utilizamos aqui o “npm” como ferramenta de gerenciamento de pacotes, mas escolha qual você achar melhor, visto que em nada irá atrapalhar no nosso desenvolvimento, contanto que seja instalado corretamente. Também é importante destacar que, neste exemplo, estamos utilizando comandos que são executados no terminal do Linux. Para outros sistemas operacionais, consulte a documentação do React. Por fim, vale salientar que o método de estilização dos elementos será feito neste exemplo via Tailwind, mas sinta-se à vontade para utilizar de qualquer forma que preferir.

Se tudo der certo, ao fim da execução dos comandos anteriores, será aberto no browser uma página com o símbolo do React:

OBS - Dentre os arquivos que são criados dentro da pasta “src” do nosso projeto, só é necessário manter os arquivos “App.css”, “App.js”, “index.css” e “index.js”, visto que não abordaremos as funcionalidades que envolvem os outros arquivos. Apague-os, remova as conexões que eles possuem nestes arquivos citados e limpe o arquivo “App.js”:

Agora, chegou a hora de criarmos algumas páginas e consultas na nossa aplicação, com o intuito de ter elementos suficientes para que a prática faça sentido. Primeiramente, criaremos um arquivo “services.js”, onde serão inseridas duas consultas a uma API disponibilizada pelo Mercado Livre:

Criaremos também um repositório dentro de “src” chamado “pages”, onde criaremos três páginas: “Home”, “Catalog” e “Details”:

Feito isto, podemos começar a abordar os principais componentes do React Router Dom e o que mudou de uma versão para outra.

BrowserRouter

O BrowserRouter é o principal componente, responsável por fazer com que todos os posteriores venham a funcionar. Ele engloba toda a parte do nosso código que utilizará rotas e, para este exemplo, iremos implementá-lo de forma a englobar o nosso componente principal App.js:

Felizmente, a implementação deste componente não mudou entre as versões 5 e 6 do React Router Dom. Dito isto, vamos em frente!

Routes

Para os que conheciam a versão anterior, era responsabilidade de um componente chamado “Switch” acoplar em seu conteúdo todas as rotas criadas. Na nova versão, este componente foi trocado pelo Routes, mas esta é a única grande mudança para este componente (ou pelo menos a que você precisa saber para criar rotas efetivas com a sexta versão). O componente Router é responsável por varrer todos os componentes “Route” que estiverem inclusos dentro dele, comparando a URL com alguma das rotas, até encontrar alguma que seja equivalente.

Route

Sem dúvidas, este é o componente que possui a maior das mudanças. Veja como o utilizávamos na quinta versão:

Com a sexta versão, não utilizamos mais a propriedade “component”: ela foi substituída pela “element”. Além disso, entre colchetes, inserimos o componente completo, tal como se estivéssemos inserindo em um retorno de função do React (“<Home />” ao invés de apenas “Home”, como era na versão cinco):

Redirect

Podemos utilizar o componente Redirect para redirecionar uma rota para outra. Por exemplo, imagine que você deseje que, quando o usuário acessar a rota raiz ‘/’, seja direcionado para a rota “/vehicles”. Na quinta versão do React Router Dom faríamos da seguinte forma:

Agora, na sexta versão, passamos a utilizar o componente “Navigate” no lugar do “Redirect”, além de utilizar “replace to” ao invés de apenas “to”. Confira:

Link

O componente Link é muito importante para o desenvolvimento com o React. Ele disponibiliza a navegação via URL sem o recarregamento da página, como é o caso do elemento “a”. Desta forma, não perderemos ações temporárias guardadas em estados ao navegarmos entre as rotas de nossa aplicação.

Felizmente este componente também não sofreu alterações com a sexta versão. Vamo utilizá-lo para criar uma navegação na página Home e Catalog:

Manipulando parâmetros da URL

Faremos a consulta à API no componente “Catalog”. Desta forma, usaremos o useEffect de modo que este se comporte como um “componentDidMount”, em termos de componentização por classes. Isso quer dizer que a função será a primeira ação a ser executada quando o componente for montado. Neste useEffect, acessaremos os dados da API e os salvaremos em um estado.

No lugar da linha 17, iremos fazer um map no array “listVehicles”, de forma que seja criado um elemento para cada item retornado pela API:

A ideia é que, ao clicar em um dos elementos, o usuário seja direcionado para detalhes deste. Na quinta versão do React Router Dom, ao importarmos o hook “useHistory”, atribuímos a chamada desta função a uma constante e, por fim, na função de click do elemento, inserimos a função “history.push(‘/endereço’). Agora, com o advento da sexta versão, utilizamos o hook “useNavigate”. Além disso, não existe mais a necessidade de uma função “push” para o redirecionamento, podendo utilizar diretamente a constante que armazena a chamada deste hook. Veja:

Viu o que fizemos na linha 37 da figura 16? Criamos um redirecionamento para uma página em que, em sua URL, há um parâmetro dinâmico, de acordo com o id do elemento selecionado. Criaremos então uma rota para definir que este elemento, que vem logo após do “details/, é um parâmetro:

Se você está se perguntando qual a necessidade da criação de um parâmetro para uma rota, é muito simples: podemos utilizar o parâmetro repassado via URL como meio de busca por mais detalhes de um determinado elemento, sem necessariamente precisar trabalhar com métodos avançados de gerenciamento de estados. Neste caso, repassamos o id do item que está à venda, dado este que utilizaremos para fazer uma nova consulta à API.

Para ter acesso aos parâmetros criados em uma rota, utilizamos o hook “useParams”. Ele nos retornará um objeto com todos os parâmetros existentes na URL em questão:

Considerações Finais

Neste artigo, conversamos sobre as principais mudanças entre as versões do React Router Dom. Você também pode consultar a documentação para qualquer outra dúvida que ficou por aqui, ou ainda você também pode entrar em contato comigo, seja por meio do e-mail bruno.cabral.silva2018@gmail.com ou pelo meu perfil do Linkedin!

Te espero ansiosamente!