React.JS: Criando rotas com React Router Dom

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.

Instalação e Configuraçã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.

npx create-react-app react-rotas

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.

cd react-rotas

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.

npm install react-router-dom

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.

Criando o arquivo de rotas

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.

  import React from "react";
  import { Route, BrowserRouter } from "react-router-dom";
   
  import Home from "./Home";
  import Sobre from "./Sobre";
  import Usuario from "./Usuario";
   
  const Routes = () => {
     return(
         <BrowserRouter>
             <Route component = { Home }  path="/" exact />
             <Route component = { Sobre }  path="/sobre" />
             <Route component = { Usuario }  path="/usuario" />
         </BrowserRouter>
     )
  }
   
  export default Routes;

Note que na linha 2 do arquivo routes.js importamos dois componentes do pacote do react-router-dom: BrowserRouter e Route.

Esses dois componentes provêm e gerenciam as rotas dentro da nossa aplicação. Vamos aprender a função de cada um.

• BrowserRouter: é um componente responsável por informar a nossa aplicação que teremos um roteamento de componentes, por conta disso ele ficará em volta dos componentes <Route>.
• Route: componente que associa a rota ao componente. Nele temos três parâmetros: component, path e exact. O parâmetro component recebe o componente que precisa ser exibido ao acessar a rota. O parâmetro path é o caminho na URL que precisa ser acessado para mostrar o componente, definido pelo parâmetro component. O parâmetro exact determina qual o componente vai ser exibido apenas se a rota for igual ao definido entre aspas, no nosso caso se for exatamente "/".

Em nosso arquivo App.js precisaremos importar o routes.js, para usarmos a navegação através das páginas em nossa aplicação, conforme mostra o Código 5.

  import React from 'react';
  import Routes from "./routes";
   
  export default function App() {
     return (
         <Routes/>
     );
  }

O próximo passo é criar nossos componentes que serão exibidos de acordo com a URL acessada pelos nossos usuários. O primeiro será o componente Home.

Para cada componente, deixaremos uma mensagem e um Link para retornar a página inicial.

Componente Home

O código do componente Home (arquivo Home.js) pode ser visto no Código 6.

  import React from 'react';
  import { Link } from 'react-router-dom';
   
  const Home = () =>{
    return (
      <div>
        <h1>Página Inicial</h1>
        <nav>
          <ul>
            <li>
              <Link to="/sobre">Sobre</Link>
            </li>
            <li>
              <Link to="/usuario">Usuario</Link>
            </li>
          </ul>
        </nav>
      </div>
    );
  }
   
  export default Home;

O componente Home foi estruturado para ser a nossa página inicial, nele temos dois links que nos permite navegar para as páginas Sobre e Usuario.

Observando o código vemos que existe um componente chamado <Link> que foi usado duas vezes como pode ser visto nas linhas 11 e 14.

Esse componente, que pertence ao pacote react-router-dom vai substituir a nossa tag <a> do HTML para acessar as páginas do próprio projeto. Além disso, recebe o parâmetro to. Ele representa o nome da rota que será acessada pela URL.

O componente Link possui duas tags: uma de abertura e uma de fechamento. Entre as duas tags (abertura e fechamento) será inserido o conteúdo que ficará disponível para ser clicado. Veja um exemplo no Código 7.

<Link to="/">retornar a página inicial</Link>

No nosso exemplo inserimos o texto "retornar a página inicial", que ao ser clicado exibirá o componente referente a rota /.

Componentes Sobre e Usuário

As páginas de Sobre e Usuário 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.

  import React from 'react';
  import { Link } from 'react-router-dom';
   
  const Sobre = () => {
      return (
          <div>
              <h1>Sobre</h1>
              <Link to="/">retornar a página inicial</Link>
          </div>
      );
  }
   
  export default Sobre;

Veja o código do componente Usuario (arquivo Usuario.js) no Código 9.

  import React from 'react';
  import { Link } from "react-router-dom";
   
  const Usuario = () => {
      return (
          <div>
              <h1>Usuário</h1>
              <Link to="/">retornar a página inicial</Link>
          </div>
      );
  }
   
  export default Usuario;

Executando a aplicação

Agora que já configuramos nosso arquivo de rotas e nossos componentes, acesse o projeto e execute o comando do Código 10.

npm start

Abra o navegador e acesse a URL http://localhost:3000. A aplicação pode ser vista na Animação 1.

Conclusão

Neste artigo vimos como utilizar rotas no React.JS usando o pacote react-router-dom, o qual instalamos e configuramos no React. Espero que tenham gostado e até a próxima.

Confira também

Primeiros passos com React

Curso

Single Page Application com React

Curso

O que é React?

Vídeo