🧩 Exercícios Práticos: Roteamento SPA com React Router 6+

Spec Frontend Com React • Trilha Progressiva em 4 Níveis

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 09.1 — Configuração de Rotas com createBrowserRouter e RouterProvider

Contexto: Configuração de Rotas com createBrowserRouter e RouterProvider no contexto de Roteamento SPA com React Router 6+.

Requisitos de Execução:

  1. Configurar rotas /, /produtos e /contato com createBrowserRouter e <RouterProvider>.

Resultado Esperado

Rotas declarativas configuradas para Single Page Application.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_1_SeuNome
  2. Envie na tarefa: Atividade Cap 09 - Roteamento SPA com React Router 6+
🔑 Gabarito de Código & Solução Comentada 
// router.tsx
import { createBrowserRouter } from 'react-router-dom';
import { Home } from './pages/Home';
import { Produtos } from './pages/Produtos';

export const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/produtos', element: <Produtos /> },
]);

🔍 Nível 2: Prática

Problema 09.2 — Layouts Aninhados com e Navbar Fixa

Contexto: Layouts Aninhados com e Navbar Fixa no contexto de Roteamento SPA com React Router 6+.

Requisitos de Execução:

  1. Criar componente RootLayout com cabeçalho de navegação, rodapé e <Outlet /> para renderizar sub-rotas.

Resultado Esperado

Páginas renderizadas dentro do layout padrão sem recarregar o cabeçalho.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_2_SeuNome
  2. Envie na tarefa: Atividade Cap 09 - Roteamento SPA com React Router 6+
🔑 Gabarito de Código & Solução Comentada 
// RootLayout.tsx
import React from 'react';
import { Outlet, Link } from 'react-router-dom';

export const RootLayout: React.FC = () => {
  return (
    <div>
      <nav>
        <Link to="/">Início</Link> | <Link to="/produtos">Produtos</Link>
      </nav>
      <main><Outlet /></main>
    </div>
  );
};

⚡ Nível 3: Integração

Problema 09.3 — Proteção de Rotas com Route Guard (RequireAuth)

Contexto: Proteção de Rotas com Route Guard (RequireAuth) no contexto de Roteamento SPA com React Router 6+.

Requisitos de Execução:

  1. Criar componente <RequireAuth> redirecionando usuários não autenticados para /login usando <Navigate>.

Resultado Esperado

Acesso à rota `/dashboard` restrito a usuários com token ativo.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_3_SeuNome
  2. Envie na tarefa: Atividade Cap 09 - Roteamento SPA com React Router 6+
🔑 Gabarito de Código & Solução Comentada 
// RequireAuth.tsx
import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';

export const RequireAuth: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const location = useLocation();
  const isAuthenticated = Boolean(localStorage.getItem('token'));

  if (!isAuthenticated) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return <>{children}</>;
};

🏆 Nível 4: Desafio Corporativo

Problema 09.4 — Carregamento de Dados com Route Loaders e Actions

Contexto: Carregamento de Dados com Route Loaders e Actions no contexto de Roteamento SPA com React Router 6+.

Requisitos de Execução:

  1. Implementar função loader() associada à rota para buscar dados antes da renderização do componente.

Resultado Esperado

Dados carregados em paralelo à transição de rota com `useLoaderData()`.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_4_SeuNome
  2. Envie na tarefa: Atividade Cap 09 - Roteamento SPA com React Router 6+
🔑 Gabarito de Código & Solução Comentada 
// ProdutosLoader.tsx
import { useLoaderData } from 'react-router-dom';

export async function produtosLoader() {
  const res = await fetch('/api/produtos');
  return res.json();
}

export const ProdutosPage = () => {
  const produtos = useLoaderData() as any[];
  return <div>{produtos.length} produtos carregados via Loader.</div>;
};
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos