Gerenciamento de Rotas no React com React Router

O React Router é uma biblioteca para gerenciamento de rotas em aplicativos React e com ele podemos configurar a navegação entre as páginas de nosso projeto de forma simples e com muitos benefícios.

Nos sites tradicionais, ao clicar em um link, o navegador solicita um novo documento HTML para o servidor, carregando todos os documentos HTML, CSS e JavaScript em cada nova tela.

O React Router permite que, ao clicar em um link, o site atualize a página sem fazer outra solicitação para o servidor. Com isso, o site pode renderizar imediatamente a próxima tela.

Curso React - Fundamentos

Conhecer o curso

Instalação

Antes de começarmos a explicar todo o processo de instalação do React Router, vamos precisar criar um novo projeto React.

Para isso, basta executar o seguinte comando:

npx create-react-app my-app

Caso você esteja com dúvidas sobre como instalar e rodar o React, você pode ler o seguinte artigo: Como instalar e executar o React

Agora, basta instalar a biblioteca do React Router. No entanto, estamos utilizando como exemplo uma aplicação web, então teremos que instalar o pacote react-router-dom, com o seguinte comando:

npm install react-router-dom

Configurando roteamento

Para configurar o React Router em um projeto React, o primeiro passo é criar um roteador do navegador e configurar a primeira rota. Isso pode ser feito no arquivo principal do React, o index.js.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

import {
  createBrowserRouter,
} from "react-router-dom";

const router = createBrowserRouter([]);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
       <App />
  </React.StrictMode>
);

O método createBrowserRouter é o método recomendado para todos os projetos da web.

Podemos criar um objeto de configuração dentro da lista no createBrowserRouter, que nada mais é que a configuração das rotas

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

A propriedade path indica o endpoint do navegador e a propriedade element é justamente o JSX que irá renderizar na tela.

Agora precisamos substituir o componente App por RouterProvider e passar a constante router no provider.

O RouterProvider é responsável por rotear todos os componentes passados no createBrowserRouter.

Com isso, teremos o seguinte cenário:

import React from 'react';
import ReactDOM from 'react-dom/client';

import {
  createBrowserRouter, RouterProvider
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Curso React - Despertando o Poder dos Hooks

Conhecer o curso

Componente Home e Sobre

Agora vamos criar dois componentes para utilizar, que vão servir como as novas telas.

O primeiro será a tela Home. Então crie um arquivo home.js e adicione o seguinte componente:


import { Link } from 'react-router-dom'

export default function Home() {
    return (
        <>
            <h2>Home</h2>
            <Link to={"/sobre"}>Ir para Sobre</Link>
        </>

    );
}

Agora o componente Sobre. Crie um arquivo sobre.js e defina o seguinte componente:


import { Link } from 'react-router-dom'

export default function Sobre() {
    return (
        <>
            <h2>Sobre</h2>
            <Link to={"/"}>Ir para Home</Link>
        </>

    );
}

Note que estamos utilizando o componente Link, em ambas as telas, para permitir a navegação entre elas. A propriedade to do componente Link deve ser definida com o mesmo valor do path que foi definido no createBrowserRouter.

Agora basta adicionar os novos componentes no createBrowserRouter para que a navegação funcione:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  }, {
    path: "/sobre",
    element: <Sobre />,
  },
]);

Agora temos duas telas onde a navegação entre elas está sendo gerenciada pelo React Router.

Conclusão

O React Router é uma excelente opção para gerenciamento de rotas em projetos React, permitindo uma navegação mais fluida e sem a necessidade de fazer novas solicitações ao servidor. Com ele, podemos criar rotas facilmente e criar a navegação entre as páginas do nosso aplicativo de forma simples e intuitiva.

Espero que este artigo tenha ajudado a entender melhor como configurar e utilizar o React Router em seus projetos React.

Sei que você gostou deste artigo e tenho certeza de que a formação para Desenvolvedor React Funcional irá ajudá-lo a se tornar um desenvolvedor muito melhor. São 14h17 de video com muito conteúdo e um total de 59 exercícios.

Veja quais são os cursos que fazem parte desta formação: