Uso de Rotas em WebApps

Introdução

Em aplicações web modernas, o roteamento é essencial para criar experiências dinâmicas e agradáveis ao usuário. Essencialmente, o roteamento determina qual conteúdo deve ser exibido conforme a URL acessada. Nas aplicações tradicionais de múltiplas páginas, cada navegação para uma nova URL recarrega toda a página, o que pode causar lentidão e perda de dados temporários.

As Single Page Applications (SPAs), como as construídas com React, revolucionaram essa abordagem. Elas carregam uma única página HTML inicial e, em seguida, atualizam dinamicamente o conteúdo na mesma página conforme o usuário navega. Essa técnica proporciona uma experiência de navegação mais suave e rápida, sem a necessidade de recarregar a página inteira a cada transição. A mudança para SPAs representa uma clara priorização da fluidez e velocidade na interação do usuário.

Para que essa navegação dinâmica funcione no React, usamos o React Router – uma biblioteca amplamente adotada para gerenciar rotas em SPAs. O React Router fornece um conjunto de componentes e hooks que permitem aos desenvolvedores definir e gerenciar rotas em suas aplicações. Em essência, o React Router sincroniza a URL do navegador com a interface do usuário React. Quando a URL muda (seja por ação do usuário ou por manipulação programática), o React Router identifica a rota correspondente e renderiza o componente associado. Vale ressaltar que o React em si não oferece funcionalidades nativas de roteamento. O React Router preenche essa lacuna e atua como intermediário entre o sistema de navegação do navegador e a lógica de renderização dos componentes React.

Ao longo deste tutorial, vamos focar na abordagem declarativa do React Router, que é a mais comum para quem está começando ou construindo aplicações com necessidades básicas de navegação.

Instalação do React Router

Para começar a utilizar o React Router em seu projeto React, o primeiro passo é instalar o pacote react-router-dom como uma dependência do seu projeto.

Abra o terminal na raiz do seu projeto React e execute o seguinte comando utilizando o npm:

npm install react-router-dom

Se você estiver utilizando o yarn como gerenciador de pacotes, o comando equivalente é:

yarn add react-router-dom

Este comando irá baixar e instalar a biblioteca do React Router e suas dependências, adicionando-as ao arquivo package.json do seu projeto.

Após a instalação, você precisará importar os componentes do React Router que deseja utilizar nos seus arquivos JavaScript.

Componentes e Hooks Principais

// Componentes principais
import { 
  BrowserRouter, 
  Routes, 
  Route, 
  Link, 
  NavLink, 
  Navigate,
  Outlet
} from 'react-router-dom';

Componentes de Configuração

<BrowserRouter>: Componente raiz que utiliza a API History do navegador para sincronizar a UI com a URL atual. Deve envolver toda a estrutura de roteamento da aplicação.
<Routes>: Container que examina todos os seus componentes <Route> filhos e renderiza apenas aquele cuja path corresponde à URL atual.
<Route>: Define o mapeamento entre um caminho de URL (path) e o componente React a ser renderizado (element).
<Outlet>: Marcador de posição que indica onde as rotas filhas devem ser renderizadas dentro de um layout compartilhado (usado em rotas aninhadas).

Componentes de Navegação

<Link>: Cria links de navegação sem recarregar a página. Substitui o <a> tradicional, prevenindo a atualização completa da página.
<NavLink>: Versão especializada do <Link> que pode receber estilo especial quando a rota estiver ativa, útil para menus de navegação.
<Navigate>: Elemento para redirecionar o usuário programaticamente (ideal para redirecionamentos condicionais).

A importação seletiva dos componentes necessários mantém o código limpo e otimiza o desempenho, evitando o carregamento de módulos não utilizados.

Conceitos Essenciais do React Router

Componentes Principais

<BrowserRouter>: Componente raiz que deve envolver toda a aplicação React para habilitar o roteamento. Utiliza a API de histórico do navegador para sincronizar a interface com a URL. Deve ser colocado no nível mais alto da estrutura de componentes (normalmente no App), fornecendo o contexto necessário para todos os componentes de roteamento.

<Routes>: Funciona como um container para as rotas da aplicação. Analisa seus componentes <Route> filhos e renderiza apenas o primeiro que corresponde à URL atual. Garante que somente uma rota seja exibida por vez, funcionando como um "switch" entre páginas.

<Route>: Define a associação entre um caminho de URL (path) e o componente React que será renderizado quando esse caminho for acessado. O path pode ser fixo (ex: /) ou dinâmico (ex: /usuarios/:id), organizando a correspondência entre URLs e componentes.

<Link>: Cria links navegáveis entre rotas internas sem recarregar a página, diferentemente da tag <a>. Proporciona navegação instantânea usando a prop to para indicar o destino, fundamental para a experiência fluida em aplicações de página única (SPA).

<Navigate>: Permite redirecionamentos programáticos entre rotas, sem necessidade de interação do usuário. Útil para fluxos condicionais como redirecionamento após login ou bloqueio de acesso não autorizado. A prop to define o destino do redirecionamento.

Roteamento Básico

Para implementar uma navegação básica, envolva seu componente App com <BrowserRouter>. Dentro dele, use <Routes> para agrupar os componentes <Route> que definem cada caminho. Cada <Route> associa um path a um componente específico. O <Link> permite a navegação entre essas rotas.

Exemplo:

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return (
    <BrowserRouter>
      {/* Menu de navegação */}
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">Sobre</Link>
        <Link to="/contact">Contato</Link>
      </nav>

      {/* Definição das rotas */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Rotas Aninhadas

Rotas aninhadas permitem estruturar a navegação hierarquicamente, com rotas definidas dentro de outras rotas, ideal para interfaces que compartilham layouts entre diferentes páginas (como painéis administrativos). O componente <Outlet /> atua como um marcador onde as rotas filhas serão renderizadas dentro do layout pai.

Quando usar?

Para criar layouts com componentes fixos (ex: menu lateral fixo com conteúdo dinâmico).
Painéis administrativos, dashboards, áreas com navegação interna.

Esta abordagem melhora a organização do código e facilita a manutenção de aplicações complexas onde várias páginas têm elementos comuns.

Exemplo:

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

// Layout compartilhado
function DashboardLayout() {
  return (
    <div>
      <h1>Painel de Controle</h1>
      <nav>
        <ul>
          <li><Link to="perfil">Perfil</Link></li>
          <li><Link to="configuracoes">Configurações</Link></li>
        </ul>
      </nav>
      {/* Aqui serão exibidas as páginas filhas */}
      <div className="dashboard-content">
        <Outlet />
      </div>
    </div>
  );
}

// Páginas filhas
function ProfilePage() {
  return <h2>Página de Perfil</h2>;
}

function SettingsPage() {
  return <h2>Página de Configurações</h2>;
}

// App principal com rotas aninhadas
function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Rota pai */}
        <Route path="/dashboard" element={<DashboardLayout />}>
          {/* Rotas filhas */}
          <Route path="perfil" element={<ProfilePage />} />
          <Route path="configuracoes" element={<SettingsPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Tradução do Exemplo

URL /dashboard/perfil
Renderiza:
- DashboardLayout (menu fixo)
- Perfil (conteúdo dinâmico)

URL /dashboard/configuracoes
Renderiza:
- DashboardLayout (menu fixo)
- Configuracoes (conteúdo dinâmico)

Rotas Dinâmicas

Rotas dinâmicas permitem definir URLs com parâmetros variáveis, perfeitas para páginas dinâmicas que mostrem detalhes específicos como produtos ou usuários (ex: /produtos/123, /usuarios/joao). Esses parâmetros são definidos com dois pontos (:id) e acessados no componente com o hook useParams().

Este recurso é essencial para páginas que exibem informações detalhadas de itens individuais, gerando URLs intuitivas e compartilháveis.

Exemplo:

import React from 'react';
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

// Página de detalhes
function ProductDetails() {
  const { id } = useParams(); // Acesse o parâmetro da URL
  return (
    <div>
      <h2>Detalhes do Produto</h2>
      <p>ID do Produto: {id}</p>
      {/* Aqui você pode buscar informações do produto usando esse ID */}
    </div>
  );
}

// Página de listagem
function ProductList() {
  return (
    <div>
      <h2>Lista de Produtos</h2>
      <ul>
        <li><Link to="/produtos/1">Produto 1</Link></li>
        <li><Link to="/produtos/25">Produto 25</Link></li>
        <li><Link to="/produtos/99">Produto 99</Link></li>
      </ul>
    </div>
  );
}

// App principal com rota dinâmica
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<ProductList />} />
        {/* Rota dinâmica com parâmetro 'id' */}
        <Route path="/produtos/:id" element={<ProductDetails />} />
      </Routes>
    </BrowserRouter>
  );
}

Traduzindo:

URL / 
Renderiza:
Lista de Produtos
• Produto 1
• Produto 25
• Produto 99

URL /produtos/1 
Renderiza:
Detalhes do Produto
ID do Produto: 1

URL /produtos/25
Renderiza:
Detalhes do Produto
ID do Produto: 25

...

Combinando as duas abordagens

Elas não são excludentes e são constantemente usadas em conjunto!

Exemplo:

// App.jsx
import { BrowserRouter, Routes, Route, Outlet, useParams, Link } from 'react-router-dom';

function PostsLayout() {
  return (
    <div>
      <h1>Posts</h1>
      <nav>
        <Link to="1">Post 1</Link> |{" "}
        <Link to="2">Post 2</Link>
      </nav>
      <Outlet />
    </div>
  );
}

function Post() {
  const { postId } = useParams();
  return <h2>Exibindo Post #{postId}</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<h1>Home Page</h1>} />
        <Route path="posts" element={<PostsLayout />}>
          <Route path=":postId" element={<Post />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Traduzindo:

URL /posts/1
Renderiza:
- PostsLayout (menu fixo)
- Post #1 (conteúdo dinâmico)

Hooks no React Router

Hooks são fundamentais para tornar aplicações React mais dinâmicas, organizadas e fáceis de manter, melhorando também a experiência do usuário.

useNavigate()

Permite navegar entre páginas ou rotas dinamicamente, sem depender de um componente <Link>

Quando usar?

Ao enviar um formulário.
Em botões que precisam levar o usuário a outra página após uma ação

Exemplo:

import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  function handleClick() {
    // Navega para a página do usuário com ID 123
    navigate('/user/123');
  }

  return <button onClick={handleClick}>Ver usuário 123</button>;
}

export default Home;

useParams()

Permite obter os parâmetros dinâmicos definidos na URL.

Exemplo: /user/:id

Quando usar?

Quando deseja carregar dados específicos baseado em uma ID, slug, ou parâmetro dinâmico.

Exemplo:

import { BrowserRouter as Router, Route, Link, Switch, useParams } from "react-router-dom";

export default function App() {
  const name = 'John Doe'
  return (
   <Router>
    <main>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to={`/about/${name}`}>About</Link></li>
        </ul>
      </nav>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about/:name"  component={About} />
    </Switch>
    </main>
</Router>
  );
}

const About = () => {
  const { name } = useParams()
  return (
  // props.match.params.name
  <Fragment>
    { name !== 'John Doe' ? <Redirect to="/" /> : null }
    <h1>About {name}</h1>
    <Route component={Contact} />
  </Fragment>
)
};

Na página navigada anteriormente pelo useNavigate(), teremos o seguinte resultado:

Perfil do usuário com o ID: 123

useLocation()

Fornece informações detalhadas sobre a localização atual do componente exibido na tela dentro das rotas.

Quando usar?

Analytics (para saber onde o usuário está).
Destacar menus baseados na rota atual.
Verificar parâmetros query diretamente da URL.

Exemplo:

Considere a URL: /search?q=react#resultados

import { useLocation } from 'react-router-dom';

function SearchInfo() {
  const location = useLocation();

  return (
    <div>
      <p>Path atual: {location.pathname}</p>
      <p>Busca atual: {location.search}</p>
      <p>Hash atual: {location.hash}</p>
    </div>
  );
}

export default SearchInfo;

Aqui, teremos o seguinte resultado:

Path atual: /search
Busca atual: ?q=react
Hash atual: #resultados

useSearchParams()

Permite acessar e modificar facilmente os parâmetros de busca (query params) da URL.

Quando usar?

Filtros e paginação.
Parâmetros opcionais, como em páginas de busca.

Exemplo:

Considere a URL: /search?q=hooks&page=2

import { useSearchParams } from 'react-router-dom';

function Search() {
  const [searchParams, setSearchParams] = useSearchParams();

  const query = searchParams.get('q'); // hooks
  const page = searchParams.get('page'); // 2

  function nextPage() {
    setSearchParams({ q: query, page: Number(page) + 1 });
  }

  return (
    <div>
      <p>Buscando por: {query}</p>
      <p>Página atual: {page}</p>
      <button onClick={nextPage}>Próxima página</button>
    </div>
  );
}

export default Search;

Ao clicar em "Próxima página", URL será atualizada para:

/search?q=hooks&page=3

Tutorial Prático: Implementando Rotas em um WebApp React

Neste tutorial, vamos implementar um sistema de rotas completo em uma aplicação React, abordando desde a configuração básica até rotas dinâmicas.

Estrutura do Projeto

Primeiro, vamos organizar nosso projeto com a seguinte estrutura:

src/
├── components/
│   ├── AboutPage.js
│   ├── ContactPage.js
│   └── HomePage.js
├── App.js
└── index.js

Esta organização permite manter os componentes de página separados, facilitando a manutenção à medida que o projeto cresce.

Criando Componentes de Página

Vamos criar componentes simples para cada página da nossa aplicação:

// src/components/HomePage.js
import React from 'react';
function HomePage() {
  return (
    <div>
      <h2>Bem-vindo à Página Inicial!</h2>
      <p>Este é o conteúdo da página inicial da nossa aplicação.</p>
    </div>
  );
}

export default HomePage;

Os componentes AboutPage.js e ContactPage.js seguem a mesma estrutura básica, apenas com conteúdo específico para cada seção.

Configurando Rotas no App.js

O componente App.js é o ponto ideal para configurar as rotas da aplicação:

// src/App.js:
import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import HomePage from './components/HomePage';
import AboutPage from './components/AboutPage';
import ContactPage from './components/ContactPage';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/sobre">Sobre</Link></li>
          <li><Link to="/contato">Contato</Link></li>
        </ul>
      </nav>
      
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/sobre" element={<AboutPage />} />
        <Route path="/contato" element={<ContactPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Neste código, utilizamos:

<BrowserRouter>: Wrapper principal do sistema de rotas
<Routes>: Contém todas as definições de rotas
<Route>: Define qual componente será renderizado em cada caminho
<Link>: Permite navegação sem recarregar a página

Melhorando a Navegação com NavLink

O componente NavLink oferece a vantagem de poder aplicar estilos ao link ativo:

// src/App.js:
import { NavLink } from 'react-router-dom';

//... dentro do componente nav substitua os links por NavLinks...
<li>
  <NavLink to="/" className={({ isActive }) => isActive? 'active' : ''}>Home</NavLink>
</li>
<li>
  <NavLink to="/sobre" className={({ isActive }) => isActive? 'active' : ''}>Sobre</NavLink>
</li>
<li>
  <NavLink to="/contato" className={({ isActive }) => isActive? 'active' : ''}>Contato</NavLink>
</li>

O NavLink recebe uma função na prop className que verifica se o link está ativo, melhorando o feedback visual para o usuário.

Implementando Rotas Dinâmicas

Para páginas que precisam exibir conteúdo baseado em parâmetros da URL:

// src/components/ProductDetails.js
import React from 'react';
import { useParams } from 'react-router-dom';

function ProductDetails() {
  const { id } = useParams();
  
  return (
    <div>
      <h2>Detalhes do Produto</h2>
      <p>ID do Produto: {id}</p>
      {/* Aqui você buscaria os detalhes do produto com base no ID */}
    </div>
  );
}

export default ProductDetails;

Em seguida, adicione a rota dinâmica no App.js:

// src/App.js:
import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import HomePage from './components/HomePage';
import AboutPage from './components/AboutPage';
import ContactPage from './components/ContactPage';
import ProductDetails from './components/ProductDetails';  // rota dinâmica

function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/sobre">Sobre</Link></li>
          <li><Link to="/contato">Contato</Link></li>
          <li><Link to="/produtos/123">Produto 123</Link></li>  // rota dinâmica
        </ul>
      </nav>
      
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/sobre" element={<AboutPage />} />
        <Route path="/contato" element={<ContactPage />} />
        <Route path="/produtos/:id" element={<ProductDetails />} />  // rota dinâmica
      </Routes>
    </BrowserRouter>
  );
}

export default ProductDetails;

O padrão /produtos/:id cria um parâmetro de URL chamado id, que podemos acessar com o hook useParams(). Esta técnica é essencial para exibir conteúdo dinâmico como páginas de produtos ou perfis de usuário.

Desta forma, você tem uma aplicação React com um sistema de rotas completo, incluindo navegação simples e capacidade para carregar conteúdo baseado em parâmetros de URL.

Rotas protegidas ou privadas

Rotas protegidas ou privadas são aquelas que exigem autenticação ou autorização para serem acessadas. Usuários não autorizados são redirecionados automaticamente para uma página de login ou outra página adequada.

Quando usar Rotas Protegidas?

Áreas administrativas (Dashboards).
Áreas restritas a usuários logados.
Perfis de usuários.
Páginas que exigem determinados privilégios.

Como implementar rotas protegidas?

A maneira mais prática é usando componentes personalizados, que encapsulam a lógica de verificação de autenticação e realizam o redirecionamento automaticamente, caso necessário.

Exemplo:

App()

// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import Dashboard from './Dashboard';
import Login from './Login';
import ProtectedRoute from './ProtectedRoute';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        
        {/* Rota Protegida */}
        <Route 
          path="/dashboard" 
          element={
            <ProtectedRoute>
              <Dashboard />
            </ProtectedRoute>
          }
        />

        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

ProtectedRoute()

// ProtectedRoute.jsx
import { Navigate } from 'react-router-dom';

// Simulação de autenticação (poderia ser Context API, Redux, etc.)
function isAuthenticated() {
  return localStorage.getItem('token') !== null;
}

function ProtectedRoute({ children }) {
  if (!isAuthenticated()) {
    // Usuário não está autenticado, redireciona para login
    return <Navigate to="/login" replace />;
  }

  // Usuário autenticado, permite acesso
  return children;
}

export default ProtectedRoute;

O que acontece aqui?

Ao tentar acessar /dashboard sem autenticação:

O usuário é redirecionado automaticamente para /login.

Curiosidade, um possível Login()

// Login.jsx
import { useNavigate } from 'react-router-dom';

function Login() {
  const navigate = useNavigate();

  function handleLogin() {
    // Simula login
    localStorage.setItem('token', 'usuario_logado');

    // Redireciona para dashboard após login
    navigate('/dashboard');
  }

  return (
    <div>
      <h2>Login</h2>
      <button onClick={handleLogin}>Entrar</button>
    </div>
  );
}

export default Login;

Após realizar login clicando no botão "Entrar":

O token é salvo no localStorage.
O usuário é redirecionado ao /dashboard.
E dessa vez o ProtectedRoute não o envia para o /login, mas sim pro /dashboard

Lazy loading em Rotas

O Lazy Loading é uma técnica que consiste em carregar partes da sua aplicação (componentes e rotas) somente quando elas forem necessárias. Isso reduz o tempo inicial de carregamento, melhorando significativamente a performance e experiência do usuário. Ela é comum em várias linguagens e o React Router traz isso para as rotas de um WebApp React

Por que usar Lazy Loading?

Reduz o tempo inicial para carregar sua aplicação.
Melhora a performance geral.
Evita carregar código desnecessário para o usuário.

A implementação utiliza principalmente duas funções do React:

lazy (importação dinâmica de componentes)
Suspense (exibição de fallback enquanto o componente é carregado)

Duas interações principais:

const MeuComponente = lazy(() => import('./MeuComponente'));

Permite importar componentes de forma assíncrona, dividindo automaticamente o código da aplicação. O componente só será renderizado quando ele for carregado.

<Suspense fallback={<div>Carregando...</div>}>
  <MeuComponente />
</Suspense>

Enquanto o componente é carregado, você deve fornecer uma UI alternativa ao usuário (fallback), um feedback visual. Visto que agora seus componentes não são imediatamente inicializados ao carregar a aplicação.

Exemplo com Rotas Aninhadas

// App.jsx com rotas aninhadas e Lazy Loading
import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Perfil = lazy(() => import('./pages/Perfil'));
const Configuracoes = lazy(() => import('./pages/Configuracoes'));

function DashboardLayout() {
  return (
    <div>
      <h2>Dashboard</h2>
      <Suspense fallback={<div>Carregando subpágina...</div>}>
        <Outlet />
      </Suspense>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Carregando página...</div>}>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/painel" element={<DashboardLayout />}>
            <Route path="perfil" element={<Perfil />} />
            <Route path="config" element={<Configuracoes />} />
          </Route>
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;

Traduzindo o exemplo

Nele, temos um Suspense englobando as rotas, esse primeiro suspense será usado apenas pelas rotas principais, isto é "/" e "/painel". As subrotas /painel/perfil e /painel/config usarão o Suspense dentro do componente DashboardLayout, e entrarão no Outlet como exemplificado anteriormente nesse tutorial, ao invés de {props.children}.

Conclusão

Neste tutorial, exploramos o conceito de roteamento em aplicações web e a importância do React Router para construir SPAs com React que oferecem uma navegação fluida e sem recarregamento de página. Aprendemos sobre os componentes essenciais do React Router, como <BrowserRouter>, <Routes>, <Route>, <Link> e <Navigate>, e como eles trabalham juntos para mapear URLs a componentes da sua aplicação. Implementamos um exemplo prático com rotas básicas, rotas aninhadas e rotas dinâmicas, e discutimos boas práticas para organizar suas rotas e evitar erros comuns. Finalmente, introduzimos o conceito de rotas privadas para proteger certas áreas da sua aplicação.