Intercepting Routes

Core Idea

Intercepting Routes carrega uma rota de outra parte da aplicação dentro do layout atual, mascarando a URL do browser, útil para exibir conteúdo (ex. foto de um feed) sem trocar de contexto (ex. em modal). Em navegação direta (URL compartilhada ou refresh) a rota completa renderiza normalmente, sem interceptação.

Key Concepts

• (.): intercepta segmento no mesmo nível.
• (..): intercepta segmento um nível acima.
• (..)(..): intercepta segmento dois níveis acima.
• (...): intercepta a partir da raiz do diretório app.
• Baseado em route segments, não file-system: pastas @slot de Parallel Routes não contam como nível para o (..); por isso photo interceptado a partir de @modal pode usar (..) mesmo estando dois níveis de arquivo acima.
• Combinação com Parallel Routes: padrão principal para construir modais compartilháveis por URL, que preservam contexto no refresh e fecham/reabrem corretamente com navegação para trás/frente.

Reference Tables

Convenção	Nível interceptado
(.)	mesmo nível
(..)	um nível acima
(..)(..)	dois níveis acima
(...)	raiz do app

Anti-patterns

• Contar @slot de Parallel Routes como nível de segmento: (..) conta níveis de rota, não de sistema de arquivos; slots não somam.
• Usar Intercepting Routes sem Parallel Routes para modal: sem o slot paralelo, perde-se a capacidade de sobrepor a UI mantendo a rota de fundo montada.

Key Takeaways

1. Navegação client-side (clique) intercepta; navegação direta/refresh sempre renderiza a página completa (hard navigation nunca intercepta).
2. Caso de uso canônico: modal de foto que também é uma página compartilhável (/photo/123).
3. Outros usos comuns: modal de login sobre navbar com página /login dedicada, carrinho de compras em modal lateral.

Connects To

• File-system conventions (ch111): índice das convenções.
• Parallel Routes (fora deste lote): combinação necessária para construir modais com Intercepting Routes.