Em um site acessamos várias páginas, como por exemplo, página inicial, contatos, sobre e perfil. Para navegar entre as páginas de uma aplicação React.JS precisaremos criar rotas, onde cada rota vai representar uma tela.
Para trabalhar com rotas no React vamos utilizar um pacote chamado React Router Dom que precisa ser instalado no nosso projeto. É ele que nos auxiliará na criação da navegação.
Antes de aplicar o conceito de navegação e instalar o pacote React Router Dom precisamos criar um projeto React. Para isso execute o Código 1.
Após a criação do novo projeto em React, precisamos instalar o pacote React Router Dom que vai manipular as rotas do nosso projeto React. Antes disso acesse a pasta do projeto executando o comando do Código 2.
A instalação de pacotes nos nossos projetos é feita através de um gerenciador de pacotes, que pode ser o NPM ou o Yarn. Nesse artigo manteremos o foco no NPM por ser comumente usado, para instalar o pacote react-router-dom. Basta executar o comando do Código 3 no terminal.
Com projeto criado e o pacote instalado, abriremos nossa aplicação em um editor de texto ou IDE de sua preferência e implementar a navegação do nosso projeto.
Neste ponto vamos criar o arquivo de rotas da nossa aplicação, o routes.js. Seu código pode ser visto no Código 4.
O código do componente Home (arquivo home.js) pode ser visto no Código 6.
As páginas de Sobre e Usuario tem a mesma estrutura: têm o título da página e um link para retornar a página inicial. Veja o código do componente Sobre (arquivo sobre.js) no Código 8.
Veja o código do componente Usuario (arquivo usuario.js) no Código 9.
Neste artigo vimos como utilizar rotas no React.JS usando o pacote react-router-dom, o qual instalamos e configuramos no React.
Leia o conteúdo completo:
Leia mais
Sua nova carreira começa aqui
Baixe agora
Veja quem já conseguiu chegar lá
Grátis por tempo limitado
Cadastre-se
Junte-se a nós