React Router Dom: Criando rotas com React.js

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

C�digo 1. Criando um projeto React.JS

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

C�digo 2. Navegando para a pasta do projeto criado

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

C�digo 3. Instalando o 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;

C�digo 4. C�digo do arquivo routes.js

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 "/".

Os componentes Home, Sobre e Usuario que foram importados em routes.js ser�o criados mais a frente ainda neste artigo, ent�o n�o se preocupe com eles nesse momento.

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/>
     );
  }

C�digo 5. C�digo do arquivo App.js

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;

C�digo 6. C�digo do componente Home (arquivo Home.js)

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>

C�digo 7. Exemplo de uso do componente Link

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

A tag <a> ser� utilizada na programaç�o React para acessar links externos ou links �ncora da pr�pria p�gina.

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;

C�digo 8. C�digo do componente Sobre (arquivo Sobre.js)

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;

C�digo 9. C�digo do componente Usuario (arquivo Usuario.js)

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

C�digo 10. Executando a aplicaç�o

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

Animaç�o 1. Aplicaç�o em funcionamento

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

React.JS: Criando rotas com React Router Dom

Neste artigo vamos abordar um conceito importante dentro de aplicações com o React.JS, que é a navegação entre telas.