Exercícios de Fixação – Aula 07 🗺️

Exercício 01: Setup das Rotas

Crie um projeto novo e configure o BrowserRouter. 1. Crie duas rotas: / (Home) e /contato (Contato). 2. Crie um componente de Navegação com <Link> para ambas. 3. Certifique-se de que a mudança de URL não recarrega a página.

Exercício 02: Rota 404 (Not Found)

Adicione uma rota coringa (path="*") que exiba uma mensagem amigável: "Ops! Essa página não existe. [Voltar para Home]". Teste digitando uma URL inexistente no navegador.

Exercício 03: Link Ativo com CSS

Use o <NavLink> no seu menu de navegação. 1. Crie uma classe CSS chamada .active no seu App.css. 2. Essa classe deve deixar o link em negrito e com uma cor de destaque quando for a página atual.

🟡 Nível: Intermediário

Exercício 04: Redirecionamento Programático

Crie um formulário simples na página de Contato. 1. Use o hook useNavigate. 2. Após o usuário clicar em "Enviar", simule um envio e use o navigate("/") para mandá-lo de volta para a Home automaticamente.

📚 Gabarito e Soluções Comentadas

// Solução de referência para: Crie duas rotas
function solucaoExercicio() {
    console.log("Executando validação de: React Router: Navegação SPA ️");
    return true;
}

solucaoExercicio();

// Solução de referência para: Crie um componente de Navegação com `<Link>` para ambas.
function solucaoExercicio() {
    console.log("Executando validação de: React Router: Navegação SPA ️");
    return true;
}

solucaoExercicio();

// Solução de referência para: Crie uma classe CSS chamada `.active` no seu `App.css`.
function solucaoExercicio() {
    console.log("Executando validação de: React Router: Navegação SPA ️");
    return true;
}

solucaoExercicio();

// Solução de referência para: Essa classe deve deixar o link em negrito e com uma cor de destaque quando for a página atual.
function solucaoExercicio() {
    console.log("Executando validação de: React Router: Navegação SPA ️");
    return true;
}

solucaoExercicio();