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

Bem-vindo ao artigo " React Router – Como usar as rotas no React? ", desenvolvido por Antônio André. Neste artigo, você aprenderá a usar as Rotas no React e como elas podem agilizar o desenvolvimento de várias aplicações web. Esse recurso tem um papel fundamental ao permitir a navegação entre diferentes páginas sem a necessidade de atualizar a página do navegador.

Ao usar as Rotas, você pode melhorar bastante o fluxo de navegabilidade da sua aplicação web. Sendo assim, as Rotas são indispensáveis quando tratamos de projetos que necessitam de um fluxo de navegação entre diferentes páginas, mas que todas ainda estão inseridas dentro do contexto de desenvolvimento da aplicação. Essas páginas são conhecidas como SPAs, isto é, Single Page Application.

Então, vamos começar e aprender como utilizar as Rotas no React em seu projeto na prática!

Requisitos desejáveis

• Conhecimento intermediário/avançado em JavaScript.
• Conhecimento básico em CSS ou em algum outro pré-processador CSS (como SASS, por exemplo).
• Conhecimento intermediário em React.
  

Requisitos obrigatórios

• VS Code: Certifique-se de ter o Visual Studio Code instalado em sua máquina. Ele é uma ferramenta de desenvolvimento de código-fonte popular e amplamente utilizada.
• Vite: Nesse artigo iremos utilizar o Vite como o ambiente de desenvolvimento, então é de importância relevante que saiba como iniciar um projeto React com o Vite.
• Node.js: O Node.js é necessário para executar os comandos NPM (gerenciador de pacotes) e NPX (execução de scripts). Se você ainda não possui o Node.js em seu sistema, você pode baixá-lo aqui. Ao fazer a instalação, tanto o Node.js quanto o NPM serão instalados automaticamente. Para verificar se eles foram instalados corretamente, siga estas etapas:

1. Abra o Visual Studio Code.
2. Abra o terminal do Visual Studio Code.
3. No terminal, execute o comando a seguir (sem as aspas): "node -v". Isso mostrará a versão atualmente instalada do Node.js.
4. Repita o mesmo procedimento para verificar a versão do NPM. Execute o comando a seguir no terminal (sem as aspas): "npm -v".
   

Repositório completo do artigo no Github

Clique aqui para acessar o repositório. (https://github.com/AntonioAndreDev/rotas-no-react-revelo)

Iniciando projeto com o Vite

Observação: você pode nomear os arquivos e pastas do jeito que preferir, não é obrigatório a seguir totalmente a nomenclatura, mas por recomendação aconselho que os nomes sejam iguais para evitar futuros conflitos e confusões.

Estruturação dos arquivos e das pastas

Por enquanto, a estrutura de arquivos e das pastas devem estar dessa forma:

Criando o banco de dados

Por esse se tratar de um projeto Frontend, iremos criar um arquivo database.json para simular um banco de dados. Evidentemente, em uma situação real de produção essas informações viriam de um determinado banco de dados.

Caso você saiba fazer essa integração com o Backend fique à vontade, mas esse não é o foco aqui.

Dentro do arquivo database.json deve conter o seguinte código json:

Portanto, as pastas e arquivos ficaram assim:

Criando as rotas

O próximo passo é criar um novo arquivo chamado router.jsx dentro da pasta src. Esse arquivo será o responsável por possibilitar gerenciar e criar todas as rotas e caminhos que estarão disponíveis dentro da aplicação. Feito isso é necessário fazer a instalação via NPM do React Router Dom, para isso faça a instalação dessa dependência usando o comando: npm install react-router-dom. Após isso, iremos usar o método createBrowserRouter(). Para isso iremos incluir esse código:

Feito isso, é necessário criar as rotas que serão utilizadas na aplicação. Essas rotas são passadas por meio de um array de objetos dentro do método que criamos anteriormente. Antes de avançar, vou te explicar de maneira rápido as propriedades que iremos utilizar:

Path: é o caminho da rota que iremos usar;

Element: é a página que estará associada ao caminho da rota.

Logo, o arquivo router.jsx ficará assim:

Usando as rotas

Feito o processo anterior de criar as rotas, nada mais justo do que as utilizar. Para isso, podemos excluir todo o conteúdo do arquivo App.jsx e incluir um componente chamado RouterProvider, disponível pelo React Router Dom e passando como valor da prop router o arquivo router, que são as rotas que criamos anteriormente. Ficando assim:

Criando as páginas de visualização de cada rota

Toda a configuração básica já foi feita, agora se você notou que no arquivo router.jsx não criamos alguns componentes/páginas pois iremos fazer isso agora. Nessa etapa iremos usar os arquivos que estarão dentro de uma pasta que vamos criar chamada pages. Alguns desenvolvedores podem optar por outros nomes, como: views, screens, e outros.

Dentro da pasta pages estarão todos nossos arquivos, isto é, os elements que foram definidos dentro do arquivo router.jsx. Ficando assim a estrutração dos arquivos e das pastas:

Agora, coloque o conteúdo de cada arquivo:

OBSERVAÇÃO IMPORTANTE: no arquivo index.css substitua o body por esse código:

OBSERVAÇÃO IMPORTANTE: no arquivo router.jsx importe corretamente cada elemento, dessa forma:

Visualizando o projeto no ambiente de desenvolvimento - 1

Agora podemos visualizar como está ficando o projeto no ambiente de desenvolvimento, para isso execute o projeto no seu navegador para que possa visualizar ele. Por enquanto está assim:

Você pode visualizar as páginas das outras rotas pôr da URL, isto é, incluindo na URL os caminhos /products

Ou /cart

Se você perceber, ao navegar entre as páginas por meio da alteração da URL, o comportamento de atualizar a página ao mudar de rota ainda está acontecendo, mas isso não é o que queremos.

Navegando entre as rotas sem atualizar a página

Vamos utilizar um outro recurso que o React Router Dom disponibiliza: o componente Link, que funciona como a tag ancora <a><a/>, mas com a diferença que é usada apenas entre redirecionamento internos, isto é, dentro da aplicação e não para links externos e evita o comportamento padrão de atualizar a página.

Para isso, vamos criar uma pasta chamada components e dentro dela teremos um arquivo chamado Header.jsx.

E dentro do arquivo Header.jsx teremos o seguinte código:

Feito esse procedimento, iremos reutilizar esse componente em todas nossas páginas das rotas que foram criadas, ficando os respectivamente assim: Cart.jsx, Home.jsx, Products.jsx

Finalizado essa etapa, você pode voltar ao seu navegador e visualizar que quando clicar em qualquer link do header o navegador não irá atualizar a página. Isso possibilita uma excelente navegação para o usuário.

OBERVAÇÃO IMPORTANTE: faça a correção do body no arquivo index.css para:

Reaproveitando um layout padrão usando children

Como você pode ter notado, o header da nossa aplicação é um componente que fica se repetindo em qualquer página de rota. Devido a isso, podemos utilizar um recurso um pouco mais avançado que o React Router Dom oferece: a propriedade children. Ela serve justamente para termos um reaproveitamento de um determinado layout que seja padrão em diferentes rotas.

Criando um layout padrão para as rotas

Dentro da pasta pages, vamos criar um arquivo chamado RootLayout, que será o layout padrão das rotas.

Dentro do arquivo RootLayout.jsx iremos utilizar um outro componente chamado Outlet, que indica em qual parte os elements devem ser renderizados dentro desse layout padrão:

Reaproveitando o layout padrão usando children

Dentro do arquivo router.jsx iremos fazer algumas modificações:

No caminho raiz do projeto, o element passará a ser o layout padrão que é o arquivo RootLayout.jsx. Ao fazermos isso, quer dizer que todos os filhos desse caminho terão tal layout padrão em outras rotas.

Em seguida, vamos usar a propriedade children que é um array de objetos, passando o caminho e seus respectivos elementos que serão mostrados em cada página.

A propriedade index indica a página inicial que será renderizada no layout padrão.

O arquivo router.jsx ficará assim:

OBSERVAÇÃO IMPORTANTE: já que estamos utilizando um layout padrão que inclui o componente Header podemos excluir esse componente dos arquivos Cart.jsx, Home.jsx e Product.jsx

Visualizando o projeto no ambiente de desenvolvimento - 2

Acesse o seu navegador e veja como está o projeto.

Página inicial:

Página de produtos:

Página de carrinho:

Finalização

Essa foi a parte 1 do artigo sobre React Router – Como usar as rotas no React?

Na parte 2 irei abordar sobre como usar parâmetros da URL da sua aplicação utilizando um hook do React. Com esse hook podemos acessar dados específicos de um produto para ver mais detalhes sobre ele e tudo isso ainda dentro do tema de Rotas no React, sem a necessidade de atualizar a página!

Te espero lá e até logo!