Conecte Suas Páginas

O BookIt agora tem cinco rotas: /, /about, /contact, /services e /services/[slug], — mas os usuários só conseguem acessá-las digitando URLs na barra de endereços. Não é assim que os sites funcionam. Vamos adicionar uma navegação adequada para que os usuários possam clicar pelo app.

O Que Você Vai Aprender

Usar tags âncora padrão para navegação
Entender a otimização automática de links do SvelteKit
Construir navegação nas páginas do BookIt
Vincular a lista de serviços aos detalhes de cada serviço

Como os Links Funcionam no SvelteKit

Boa notícia: você não precisa de um componente especial. Tags âncora HTML padrão funcionam perfeitamente:

<a href="/services">View Services</a>

O SvelteKit intercepta automaticamente esses links e gerencia a navegação no lado do cliente — sem recarregamento completo da página, sem importações especiais necessárias.

Adicione Navegação à Página Inicial

Vamos atualizar a página inicial do BookIt para criar links para outras páginas.

<!-- filename: src/routes/+page.svelte -->
<script>
	const appName = 'BookIt'
	const tagline = 'Book your next service appointment in minutes.'
</script>

<div class="hero">
	<h1>Welcome to {appName}</h1>
	<p class="tagline">{tagline}</p>
</div>

<nav>
	<a href="/services">Browse Services</a>
	<a href="/about">About Us</a>
	<a href="/contact">Contact</a>
</nav>

<section>
	<h2>How It Works</h2>
	<ol>
		<li>Browse our available services</li>
		<li>Choose a time that works for you</li>
		<li>Confirm your booking</li>
	</ol>
	<a href="/services">Get Started →</a>
</section>

Salve e teste. Clicar em "Browse Services" deve levá-lo a /services sem recarregar a página. A URL muda, o conteúdo é atualizado, mas a experiência é instantânea.

Vincule os Serviços às Suas Páginas de Detalhes

A lista de serviços deve ter links para as páginas individuais de cada serviço. Atualize sua página de serviços:

<!-- filename: src/routes/services/+page.svelte -->
<script>
	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
		}
	]
</script>

<h1>Our Services</h1>
<p>Browse our available services and book your appointment.</p>

<ul>
	{#each services as service}
		<li>
			<h2>
				<a href="/services/{service.slug}">{service.name}</a>
			</h2>
			<p>{service.description}</p>
			<p><strong>${service.price}</strong> · {service.duration} minutes</p>
			<a href="/services/{service.slug}">View Details →</a>
		</li>
	{/each}
</ul>

A adição principal é href="/services/{service.slug}". Isso cria links como /services/lawn-mowing, /services/hedge-trimming, etc. — exatamente o que nossa rota dinâmica espera.

Adicione Navegação à Página de Detalhes

As páginas de detalhes de serviço devem ter um link de volta para a lista de serviços:

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

<nav>
	<a href="/services">← Back to Services</a>
</nav>

{#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}

Crie um Componente de Navegação Simples

Em sua essência, a navegação deve aparecer dinamicamente em todas as páginas, com algumas exceções. Por enquanto, vamos adicioná-la manualmente a cada página. No próximo módulo, apresentaremos layouts, que lidam com isso de forma mais limpa e escalável.

Adicione este bloco de navegação como a primeira parte da marcação HTML em cada arquivo +page.svelte:

<nav>
	<a href="/">BookIt</a>
	<a href="/services">Services</a>
	<a href="/about">About</a>
	<a href="/contact">Contact</a>
</nav>

Sim, isso é repetitivo. Você vai corrigir isso com layouts. Por ora, funciona.

Comportamento dos Links no SvelteKit

Quando você clica em um link no SvelteKit:

O SvelteKit intercepta o clique
Em vez de um carregamento completo da página, ele busca apenas o que mudou
A URL é atualizada no navegador
A nova página renderiza instantaneamente

Esse "roteamento no lado do cliente" faz a navegação parecer ágil. Mas se o JavaScript falhar ao carregar, os links continuam funcionando — eles se tornam navegações de página comuns. Isso é chamado de aprimoramento progressivo.

Quando os Links Não São Interceptados

O SvelteKit não interceptará links que:

Tenham um atributo target (target="_blank")
Apontem para origens diferentes (https://external-site.com)
Tenham o atributo rel="external"
Tenham um atributo download

<!-- These navigate normally (full page load) -->
<a href="https://google.com">External Link</a>
<a href="/file.pdf" download>Download PDF</a>
<a href="/services" target="_blank">Open in New Tab</a>

Teste Sua Navegação

Com o servidor de desenvolvimento em execução, navegue pelo BookIt:

Comece na página inicial (/)
Clique em "Browse Services" → /services
Clique no nome de um serviço → /services/lawn-mowing
Clique em "Back to Services" → /services
Clique em "About" → /about
Clique em "Contact" → /contact
Clique no logotipo "BookIt" → /

Cada clique deve ser instantâneo. Observe a barra de URL — ela é atualizada sem que a página pisque ou recarregue.

Erros Comuns

Barra Inicial Ausente

<!-- ❌ Relative path — might break depending on current route -->
<a href="services">Services</a>

<!-- ✅ Absolute path — always works -->
<a href="/services">Services</a>

Sempre use caminhos absolutos (começando com /) para links de navegação. Caminhos relativos são resolvidos com base na URL atual, o que pode causar comportamentos inesperados.

Fixar Caminhos Dinâmicos no Código

<!-- ❌ Hardcoded — doesn't use actual data -->
<a href="/services/lawn-mowing">View Details</a>

<!-- ✅ Dynamic — works for any service -->
<a href="/services/{service.slug}">View Details</a>

Ao criar links para rotas dinâmicas, sempre construa a URL a partir dos seus dados.

Resumo

A navegação no SvelteKit usa tags âncora padrão. O SvelteKit automaticamente as torna rápidas com roteamento no lado do cliente, mantendo-as funcionais sem JavaScript.

Principais conclusões:

Use tags <a href="..."> normais para navegação
O SvelteKit intercepta e otimiza links internos automaticamente
Construa links dinâmicos usando sintaxe de template: href="/path/{variable}"
Sempre use caminhos absolutos começando com /

Módulo Concluído! 🎉

Você terminou o Módulo 2: Roteamento Básico. O BookIt agora possui:

Página inicial em /
Lista de serviços em /services
Páginas individuais de serviço em /services/[slug]
Página Sobre em /about
Página de Contato em /contact
Navegação entre todas as páginas

O Que Está Faltando: A navegação está duplicada em todas as páginas. Isso é tedioso e propenso a erros.

Próximos Passos

Continue com o Módulo 3: Layouts, onde você aprenderá a compartilhar elementos de UI (como a navegação) em todas as páginas sem repetição.