React Router DOM: como funciona o roteamento em aplicações React

O que é o React Router DOM e por que usar?

Aplicações de página única vs. aplicações com múltiplas rotas

Vantagens do roteamento client-side

• Performance e UX fluida: como não há recarregamento completo da página, as transições entre diferentes seções da aplicação são muito mais rápidas e suaves, proporcionando uma experiência de usuário similar à de um aplicativo nativo de desktop ou mobile.

• URLs compartilháveis: cada visualização da sua aplicação pode ter uma URL única. Isso significa que a pessoa usuária pode favoritar uma página específica ou compartilhar um link direto para um conteúdo, algo que seria complexo em uma SPA sem um sistema de roteamento.

• Navegação consistente: ele se integra perfeitamente com os botões de "voltar" e "avançar" do navegador, mantendo o comportamento esperado pelo usuário e melhorando a usabilidade.

• A URL como fonte de estado: a URL se torna uma parte confiável do estado da sua aplicação. Você pode usar a informação contida nela para decidir o que renderizar, qual dado buscar e como a interface deve se comportar.

Primeiros passos com React Router DOM

Instalação e configuração inicial

npm install react-router-dom

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.23.1", // exemplo de versão
	...
	...
	...
},

Estrutura básica de um projeto com roteamento

/src

|-- /components  // Componentes de UI reutilizáveis (Button, Input, Card, etc.)
|-- /pages       // Componentes que representam uma página (Home, Sobre, Contato)
|-- App.js       // Onde a configuração das rotas vai morar
|-- index.js     // Ponto de entrada da aplicação

Componentes principais do React Router DOM

BrowserRouter como provedor de contexto

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

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

Routes e Route, definindo as rotas

• <Routes>: sua função é analisar todas as suas rotas filhas (<Route>) e renderizar aquela que melhor corresponde à URL atual do navegador.

• <Route>: cada componente <Route> é uma declaração de mapeamento. Ele conecta um path (o caminho na URL, como /sobre) a um element (o componente React que deve ser exibido nesse caminho).

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Profile from './pages/Profile';
import Settings from './pages/Settings';

// Criando componentes 
const Mayk = () => <div>Página inicial do Mayk</div>;
const Diego = () => <div>Página de perfil do Diego</div>;
const Rodrigo = () => <div>Página de configurações do Rodrigo</div>;

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Mayk />} />
        <Route path="/diego" element={<Diego />} />
        <Route path="/rodrigo" element={<Rodrigo />} />
      </Routes>
    </div>
  );
}

Navegação entre páginas com Link e NavLink

• <Link>: para criar links de navegação básicos.

• <NavLink>: variação especial do <Link> que "sabe" quando a rota para a qual ele aponta está ativa. Isso é extremamente útil para estilizar o link da página atual em um menu de navegação, por exemplo, destacando-o.

import { Link, NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      {/* Link simples para a página inicial */}
      <Link to="/">Home</Link>

      {/* NavLink para a página "Sobre", com estilo condicional */}
      <NavLink
        to="/sobre"
        style={({ isActive }) => {
          return {
            fontWeight: isActive ? 'bold' : 'normal',
            color: isActive? "#8257E5" : "black",
          };
        }}
      >
        Sobre
      </NavLink>
    </nav>
  );
}

Configurando o projeto do zero

npm create vite@latest meu-app-roteado -- --template react
cd meu-app-roteado

npm install react-router-dom

Implementando páginas básicas

const Home = () => {
  return <h1>Página Inicial</h1>;
};
export default Home;

const Sobre = () => {
  // Usando nomes fictícios da comunidade Rocketseat, como pedido no plano
  const equipe = [
    { id: 1, nome: "Laís" },
    { id: 2, nome: "Isabela" },
    { id: 3, nome: "Fernanda" },
  ];

  return (
    <div>
      <h1>Sobre Nós</h1>
      <p>Nossa equipe é formada por: {equipe.map(m => m.nome).join(', ')}.</p>
    </div>
  );
};
export default Sobre;

const Contato = () => {
  return <h1>Página de Contato</h1>;
};
export default Contato;

import { Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import Sobre from './pages/Sobre';
import Contato from './pages/Contato';
import './App.css'; // Estilização básica

function App() {
  return (
    <div className="App">
      <header>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/sobre">Sobre</Link>
          <Link to="/contato">Contato</Link>
        </nav>
      </header>
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/sobre" element={<Sobre />} />
          <Route path="/contato" element={<Contato />} />
        </Routes>
      </main>
    </div>
  );
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './index.css';

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

Testando a navegação

• A URL na barra de endereços do navegador muda.

• O conteúdo da página (o <h1>) muda para corresponder à página clicada.

• A página inteira não recarrega.

Parabéns, você acabou de criar sua primeira aplicação React com roteamento!

Conceitos para expandir conhecimento

Parâmetros de rota e dados dinâmicos

<Route path="/perfil/:userId" element={<UserProfile />} />

// src/pages/UserProfile.jsx
import { useParams } from 'react-router-dom';

function UserProfile() {
  // O hook useParams retorna um objeto com os parâmetros da URL.
  // A chave do objeto é o nome que demos ao parâmetro na rota (:userId).
  let { userId } = useParams();

  return (
    <div>
      <h2>Perfil do usuário:</h2>
      <p>Exibindo informações: <strong>{userId}</strong>.</p>
    </div>
  );
}

export default UserProfile;

Rotas aninhadas e layouts

// src/layouts/DashboardLayout.jsx
import { Outlet, Link } from 'react-router-dom';

const DashboardLayout = () => (
  <div>
    <header>
      <h1>Meu Dashboard</h1>
    </header>
    <aside>
      <nav>
        <Link to="/dashboard">Início</Link> | 
        <Link to="/dashboard/stats">Estatísticas</Link>
      </nav>
    </aside>
    <main>
      {/* O conteúdo das rotas aninhadas será renderizado aqui */}
      <Outlet />
    </main>
  </div>
);
export default DashboardLayout;

import DashboardLayout from './layouts/DashboardLayout';
import DashboardHome from './pages/DashboardHome';
import DashboardStats from './pages/DashboardStats';

<Routes>
  {/*... outras rotas... */}
  <Route path="/dashboard" element={<DashboardLayout />}>
    <Route index element={<DashboardHome />} /> {/* Rota padrão para /dashboard */}
    <Route path="stats" element={<DashboardStats />} /> {/* Rota para /dashboard/stats */}
  </Route>
</Routes>

Tratamento de rotas não encontradas (404)

import NotFoundPage from './pages/NotFoundPage';

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/sobre" element={<Sobre />} />
  <Route path="*" element={<NotFoundPage />} /> // <----
</Routes>

Novidades do React Router v7 que você deve conhecer

Introdução aos loaders e actions

• loaders: funções que você exporta de um módulo de rota para buscar dados antes que o componente seja renderizado. A página só é exibida quando os dados já estão disponíveis, eliminando a necessidade de gerenciar estados de carregamento no componente.

• actions: funções que lidam com mutações de dados, como o envio de um formulário. Elas são acionadas por submissões de formulários e executam a lógica de criar, atualizar ou deletar dados.

Melhorias na tipagem e segurança

Framework mode e suas possibilidades

Sua jornada com React Router