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:
