Uma Rota, Muitas Páginas

Criar uma pasta para cada serviço seria tedioso — e impossível se os serviços forem adicionados dinamicamente. O SvelteKit resolve isso com rotas dinâmicas: uma única definição de rota que corresponde a múltiplas URLs com base em um parâmetro.

O Que Você Vai Aprender

Criar rotas dinâmicas com a sintaxe [parameter]
Acessar parâmetros de rota no seu componente
Construir páginas de detalhes de serviços para o BookIt

O Problema

O BookIt possui múltiplos serviços. Cada um precisa de sua própria página:

/services/lawn-mowing — Detalhes de Corte de Grama
/services/hedge-trimming — Detalhes de Poda de Cerca-Viva
/services/garden-consultation — Detalhes de Consultoria de Jardim

Criar uma pasta separada para cada serviço não é escalável. O que acontece quando você tem 50 serviços? 500?

A Solução: Parâmetros Dinâmicos

Em vez de criar services/lawn-mowing/, services/hedge-trimming/, etc., você cria uma única pasta com um parâmetro:

src/routes/services/[slug]/
└── +page.svelte

Os colchetes [slug] dizem ao SvelteKit que esse segmento é dinâmico. Ele corresponderá a qualquer valor:

/services/lawn-mowing ✓
/services/hedge-trimming ✓
/services/anything-at-all ✓

O valor real (lawn-mowing, hedge-trimming, etc.) fica disponível como um parâmetro no seu componente.

Criar a Rota de Detalhes do Serviço

Passo 1: Criar a Pasta Dinâmica

Dentro de src/routes/services/, crie uma pasta chamada [slug]:

src/routes/
├── services/
│   ├── +page.svelte       (services listing)
│   └── [slug]/            ← Create this folder
│       └── +page.svelte   ← And this file

O nome da pasta deve incluir os colchetes. Ela se chama literalmente [slug].

Passo 2: Acessar o Parâmetro

Crie +page.svelte dentro de [slug]:

<!-- filename: src/routes/services/[slug]/+page.svelte -->
<script>
  let { data } = $props();
</script>

<h1>Service: {data.slug}</h1>
<p>You're viewing the detail page for: {data.slug}</p>

Espera — de onde vem data.slug? Estou recebendo ERRO em slug! Não se preocupe, vamos carregá-lo no próximo passo.

Passo 3: Adicionar uma Função de Carregamento

Rotas dinâmicas geralmente precisam de uma função de carregamento para acessar o parâmetro. Crie +page.js na mesma pasta:

// filename: src/routes/services/[slug]/+page.js
export function load({ params }) {
  return {
    slug: params.slug
  };
}

O objeto params contém todos os segmentos dinâmicos da URL. Como nossa pasta é [slug], acessamos params.slug. Vamos cobrir a função load mais adiante no curso.

Passo 4: Testar

Acesse estas URLs:

http://localhost:5173/services/lawn-mowing
http://localhost:5173/services/hedge-trimming
http://localhost:5173/services/test-123

Cada uma deve exibir "Service: lawn-mowing", "Service: hedge-trimming", etc.

Construir uma Página de Detalhes Real

Exibir apenas o slug não é útil. Vamos mostrar informações reais do serviço. Precisamos simular uma fonte de dados. Por enquanto, vamos fixar os dados dos serviços novamente, mas desta vez em +page.js. Não esqueça também de retornar services da função de carregamento.

Atualize +page.js para encontrar o serviço:

// filename: src/routes/services/[slug]/+page.js
const services = [
  {
    id: '1',
    slug: 'lawn-mowing',
    name: 'Lawn Mowing',
    description: 'Professional lawn mowing service for residential properties.',
    price: 50,
    duration: 60
  },
  {
    id: '2',
    slug: 'hedge-trimming',
    name: 'Hedge Trimming',
    description: 'Expert hedge and shrub trimming to keep your garden tidy.',
    price: 75,
    duration: 90
  },
  {
    id: '3',
    slug: 'garden-consultation',
    name: 'Garden Consultation',
    description: 'One-on-one consultation for garden planning and advice.',
    price: 100,
    duration: 60
  }
];

export function load({ params }) {
  const service = services.find(s => s.slug === params.slug);
  
  return {
    slug: params.slug,
    // Return the found service (or null if not found)
    service: service || null
  };
}

Agora atualize a página para exibir os detalhes do serviço:

<!-- filename: src/routes/services/[slug]/+page.svelte -->
<script>
  let { data } = $props();
</script>

{#if data.service}
  <h1>{data.service.name}</h1>
  <p>{data.service.description}</p>
  
  <dl>
    <dt>Price</dt>
    <dd>${data.service.price}</dd>
    
    <dt>Duration</dt>
    <dd>{data.service.duration} minutes</dd>
  </dl>
  
  <button>Book Now</button>
{:else}
  <h1>Service Not Found</h1>
  <p>Sorry, we couldn't find a service matching "{data.slug}".</p>
{/if}

Entendendo o Fluxo de Dados

Veja o que acontece quando alguém acessa /services/lawn-mowing:

O SvelteKit corresponde a URL a services/[slug]/+page.svelte
A função load em +page.js é executada com params.slug = 'lawn-mowing'
load encontra o serviço e o retorna
O componente de página recebe data.service via props
O template renderiza os detalhes do serviço

Essa separação — carregar dados em +page.js, renderizar em +page.svelte — é um padrão central do SvelteKit que exploraremos profundamente no Módulo 9.

A Estrutura do Seu Projeto

src/routes/
├── +page.svelte              → /
├── services/
│   ├── +page.svelte          → /services
│   └── [slug]/
│       ├── +page.js          ← Load function (new!)
│       └── +page.svelte      → /services/* (dynamic)
├── about/
│   └── +page.svelte          → /about
└── contact/
    └── +page.svelte          → /contact

Erros Comuns

Esquecer os Colchetes

src/routes/services/
└── slug/
    └── +page.svelte    → /services/slug (literal!)

Sem os colchetes, slug é tratado como um segmento de caminho literal. Apenas /services/slug corresponderia — não /services/lawn-mowing.

src/routes/services/
└── [slug]/
    └── +page.svelte    → /services/* (any value)

Nome do Parâmetro Incompatível

// Folder is [slug], but accessing wrong parameter name
export function load({ params }) {
  return { id: params.id };  // ❌ undefined — should be params.slug
}

O nome do parâmetro em params corresponde ao nome da pasta. [slug] fornece params.slug, [id] forneceria params.id.

Não Tratar Dados Ausentes

Sempre trate o caso em que nenhum serviço corresponde:

{#if data.service}
  <!-- Show service -->
{:else}
  <!-- Show error state -->
{/if}

Sem essa verificação, acessar /services/nonexistent causaria um erro ao tentar acessar propriedades de undefined.

Resumo

Rotas dinâmicas permitem criar uma única definição de página que trata muitas URLs. A sintaxe de pasta [parameter] captura o segmento da URL como um valor que você pode usar para carregar dados específicos.

Principais conclusões:

Colchetes [name] criam segmentos de rota dinâmicos
Acesse parâmetros via params.name nas funções de carregamento
Sempre trate os casos em que o parâmetro não corresponde a dados válidos

Próximos Passos

Agora temos várias páginas, mas nenhuma forma de navegar entre elas sem digitar URLs. Continue com Conectar Todas as Páginas para adicionar navegação adequada em todo o BookIt.