React Router: Como usar as rotas no React? - Parte II

Na parte 1 desse módulo aprendemos a como criar uma estrutura funcional com React Router DOM. Nessa segunda parte do artigo iremos aprender a como usar os Parâmetros da URL junto com React Router. Para isso, iremos dar continuidade ao projeto que estamos utilizando desde a parte 1 do artigo, se você chegou aqui de paraquedas e quer pegar essa explicação desde o início acesse esse link.

O que são os parâmetros da URL?

Os parâmetros da URL se referem a valores variáveis que podem ser incluídos na própria URL para representar informações específicas, como IDs, nomes ou outros dados relevantes para a página ou componente que está sendo renderizado. Os parâmetros da URL são uma parte essencial do roteamento dinâmico, permitindo que você crie páginas reutilizáveis e dinâmicas que exibem informações diferentes com base nos valores fornecidos na URL.

Vamos ver isso na prática!

Configurando os parâmetros da URL:

Para que possamos utilizar esse recurso será necessário fazer a configuração básica dele. Vamos supor que o usuário está na aba de produtos e ele quer ver dados de um jogo X, é justamente aí que entra esse recurso.

No arquivo router.jsx vamos adicionar uma nova rota. Essa nova rota terá como caminho o /products mas além disso, quando o usuário clicar no produto a rota deverá ser acessada por meio de algum parâmetro. Esse parâmetro deve ser um nome exclusivo, isto é, um ID. Para criar esse parâmetro é bem simples, basta passar no caminho /products/ o parâmetro :productId. E atrelado a esse caminho o elemento que será carregado, isto é, a tela de exibição. Logo, o arquivo router.jsx ficará assim:

Feito isso, é necessário criar a page Product, dentro da pasta page. Dentro da pasta page, crie o arquivo Product.jsx e dentro dele adicione o conteúdo:

As pastas e arquivos devem estar assim até o momento:

Ajustando redirecionamento para os parâmetros da URL:

Agora que fizemos a configuração inicial da página, nada mais justo do que cada produto acessar suas respectivas características. Para isso vamos adicionar o componente Link que o React Router DOM disponibiliza, no arquivo Products.jsx:

Agora, você pode fazer um teste. Acessando a aba Produtos e clicando no botão ver, vai ser redirecionado para a página padrão que criamos (a Product) e na URL estará /product/1 (se você acessar o primeiro produto estará 1, caso contrário estará qualquer outro valor).

Página de Produtos:

Após clicar para ver o produto:

Veja que os parâmetros da URL foram alterados e o conteúdo também!

Renderizando os dados de cada produto de forma dinâmica

Criamos uma página Product, que por padrão tem apenas um Link e um título, mas não é isso que queremos mostrar para o usuário, o que queremos mostrar são as informações gerais sobre o produto que ele está acessando.

Para isso, também é bem simples. Basta utilizarmos um hook do React Router DOM: useParams(). Que é um hook que serve justamente para utilizarmos os parâmetros da URL e assim seja possível capturar o valor, nesse caso, o ID do produto que o usuário está acessando e renderizar na tela as informações do produto que ele deseja visualizar!

OBSERVAÇÃO IMPORTANTE: O hook useParams retorna um objeto. Portanto, você pode acessar esse valor do parâmetro por meio da sintaxe nomeDaVariavel.nomeDoParâmetro ou pode desestruturar esse objeto, já capturando o valor do parâmetro (vamos utilizar esse método nesse artigo).

Logo, no arquivo Product.jsx ficará assim:

Agora, teremos que importar todos os produtos do nosso banco de dados fictício e procurar pelo produto que o usuário está acessando usando o método find() na lista de produtos:

OBSERVAÇÃO IMPORTANTE: no método find() utilizei antes de productId o sinal de “+” para converter de forma simples o tipo do valor de string para number. Caso essa conversão não fosse feita, daria um erro. Você pode testar retirando o sinal de “+”.

Por fim, vamos renderizar os dados do produto:

Analisando o código no ambiente de produção

Agora, podemos ver como está ficando o nosso projeto no navegador! Ao tentar ver os detalhes de qualquer produto deve carregar todas as suas informações dessa forma:

Se o seu projeto está dando algum erro, recomendo que o analise cuidadosamente e qualquer coisa basta acessar o repositório do projeto no Github!

Finalização

Em conclusão, neste artigo exploramos a importância e a utilidade dos parâmetros da URL no React Router DOM. Aprendemos como utilizar os parâmetros da URL para criar páginas dinâmicas e reutilizáveis, permitindo que nossos aplicativos renderizem conteúdo específico com base nas informações presentes na URL. Vimos como capturar esses parâmetros usando o useParams() hook e como utilizá-los para buscar e exibir dados relevantes.

No próximo artigo, darei continuidade a esta série, expandindo nosso conhecimento para lidar com um aspecto crucial do desenvolvimento de aplicações usando o React Router DOM: o tratamento de erros. Abordarei como criar páginas de erro personalizadas, como lidar com situações em que rotas não correspondentes são acessadas e como aprimorar a experiência do usuário ao enfrentar problemas de navegação.

Gostaria de agradecer por acompanhar este artigo e pela dedicação em aprender mais sobre o React Router DOM e suas funcionalidades. Espero vê-lo na terceira e última parte desta série, onde continuaremos a aprofundar nosso entendimento e aprimorar nossas habilidades de desenvolvimento com o React Router DOM. Até lá, continue explorando, codificando e expandindo seus horizontes no mundo do desenvolvimento web com React.