Pular para conteúdo

Aula 09 - Roteamento SPA na Prática 🗺️

Objetivo

Objetivo: Compreender como funciona a navegação em uma Single Page Application, configurar rotas dinâmicas e aprender a transicionar entre páginas sem recarregar o navegador.

1. O que é Roteamento SPA? 🧭

Em um site tradicional, cada link leva a um novo arquivo HTML. Em uma SPA (Single Page Application), existe apenas um index.html. O roteador é o responsável por decidir qual componente mostrar baseado na URL que está no navegador.

Vantagens:

  • Velocidade: A transição é instantânea pois o HTML base já está carregado.
  • Estado Preservado: Você pode manter dados (como um player de música) tocando enquanto navega.

2. Fluxo de Navegação SPA (Mermaid) 📊

graph TD
    A[Usuário clica em Link] --> B[Roteador intercepta o clique]
    B --> C[URL muda no navegador]
    C --> D{Existe rota definida?}
    D -- Sim --> E[Destrói componente antigo]
    E --> F[Renderiza componente novo]
    D -- Não --> G[Mostra Página 404]

3. Instalando um Roteador 💻

No Svelte puro, uma das opções mais simples e robustas para SPAs é o svelte-spa-router.

<div id="termynal" data-termynal>
    <span data-ty="input">npm install svelte-spa-router</span>
    <span data-ty="progress"></span>
    <span data-ty>✔ Pacote instalado com sucesso!</span>
</div>

4. Configurando as Rotas 🛠️

Para configurar, criamos um mapa que liga "Caminhos" a "Componentes".

<script>
  import Router from 'svelte-spa-router';
  import Home from './routes/Home.svelte';
  import Sobre from './routes/Sobre.svelte';
  import NotFound from './routes/NotFound.svelte';

  const routes = {
    '/': Home,
    '/sobre': Sobre,
    '*': NotFound // Rota curinga para 404
  };
</script>

<Router {routes} />

Para navegar, usamos links comuns, mas com uma diretiva especial para garantir que o roteador trate o clique sem recarregar a página.

<script>
  import { link } from 'svelte-spa-router';
</script>

<nav>
  <a href="/" use:link>Início</a>
  <a href="/sobre" use:link>Sobre</a>
</nav>

Conceito

A diretiva use:link evita o comportamento padrão do navegador de recarregar a página completa.

6. Mini-Projeto: Mini Blog SPA 🚀

Sua missão: 1. Instale o svelte-spa-router. 2. Crie uma pasta src/routes. 3. Crie os componentes Home.svelte e Sobre.svelte dentro dessa pasta. 4. No App.svelte, configure o roteador e crie um menu de navegação simples. 5. Adicione um componente NotFound.svelte para lidar com caminhos inexistentes.

Dica

Você pode passar parâmetros na URL como /perfil/:id. O roteador entregará o id para o componente automaticamente!

7. Exercício de Fixação 📝

  1. Por que a página não "pisca" branco ao navegar em uma SPA?
  2. Qual a função da rota * no objeto de configuração?
  3. Como o roteador sabe qual componente exibir se só existe um arquivo index.html?

Próxima Aula: Vamos aprender a compartilhar dados entre componentes distantes com Stores e Estado! 📦