Sua Estrutura de Pastas É o Seu Roteador

Em frameworks tradicionais, você define as rotas em um arquivo de configuração — mapeando URLs para componentes. O SvelteKit adota uma abordagem diferente: sua estrutura de pastas dentro de src/routes se torna diretamente a sua estrutura de URLs. Crie uma pasta, obtenha uma rota.

O Que Você Vai Aprender

Como o SvelteKit mapeia pastas para URLs
O papel dos arquivos +page.svelte
Por que essa abordagem simplifica o desenvolvimento

O Modelo Mental

Pense na pasta src/routes como a estrutura de URLs do seu site:

src/routes/
├── +page.svelte         → /
├── about/
│   └── +page.svelte     → /about
├── services/
│   └── +page.svelte     → /services
└── contact/
    └── +page.svelte     → /contact

Cada pasta se torna um segmento de URL. Cada arquivo +page.svelte se torna o conteúdo da página para aquela URL.

As Regras

O roteamento do SvelteKit segue três regras simples:

Regra 1: Pastas criam segmentos de URL

Uma pasta chamada about cria a rota /about. Uma pasta chamada services cria /services. Pastas aninhadas criam rotas aninhadas — services/pricing se torna /services/pricing.

Regra 2: +page.svelte renderiza a página

O arquivo +page.svelte contém o componente que é renderizado quando alguém acessa aquela rota. Sem esse arquivo, a rota não existe como uma página acessável.

Regra 3: O +page.svelte raiz é sua página inicial

O +page.svelte diretamente dentro de src/routes (sem estar em nenhuma subpasta) é renderizado em / — a página inicial do seu site.

Por Que Roteamento Baseado em Arquivos?

Vindo do React Router ou Vue Router, você pode se perguntar por que o SvelteKit usa essa abordagem.

Sem deriva de configuração. Suas rotas são seus arquivos. Você não pode esquecer de registrar uma rota porque criar o arquivo é registrar a rota.

Clareza visual. Olhar para a estrutura de pastas mostra todas as páginas do seu app. Novos membros da equipe conseguem entender a estrutura do site imediatamente.

Colocalização. Cada pasta de rota pode conter sua página, lógica de carregamento de dados e arquivos relacionados — tudo para aquela rota fica junto.

E o BookIt?

Por enquanto, o BookIt só tem uma página inicial. Ao final deste módulo, você terá:

src/routes/
├── +page.svelte              → / (Welcome to BookIt)
├── services/
│   ├── +page.svelte          → /services (Browse all services)
│   └── [slug]/
│       └── +page.svelte      → /services/lawn-mowing (Service detail)
├── about/
│   └── +page.svelte          → /about
└── contact/
    └── +page.svelte          → /contact

Os usuários poderão navegar entre as páginas para explorar sua plataforma de reservas.

Erros Comuns

Esquecer o `+page.svelte`

src/routes/
└── about/
    └── About.svelte    ← This won't work!

O SvelteKit procura especificamente por +page.svelte. Um arquivo chamado About.svelte não criará uma rota — é apenas um arquivo de componente que pode ser importado em outro lugar.

src/routes/
└── about/
    └── +page.svelte    ← Correct!

O prefixo + é intencional. Ele sinaliza ao SvelteKit (e a você) que esse arquivo tem um significado especial no sistema de roteamento.

Resumo

O roteamento baseado em arquivos do SvelteKit significa que a estrutura do seu projeto é a sua estrutura de URLs. Crie uma pasta, adicione +page.svelte, e você tem uma rota. Sem arquivos de configuração, sem etapas de registro.

Principais conclusões:

Pastas dentro de src/routes se tornam segmentos de URL
Arquivos +page.svelte renderizam o conteúdo da página
O prefixo + marca arquivos com comportamento especial de roteamento

Próximos Passos

Agora que você entende como o roteamento funciona, vamos criar a primeira página real para o BookIt. Continue com Criar Página About, onde adicionaremos a rota /about.