Layouts: Expo Router e Layouts Aninhados
Neste tutorial, exploramos como criar e utilizar rotas dinâmicas no Expo Router, um recurso essencial para construir aplicativos com navegação flexível e tratamento de parâmetros.
Criando Rotas Dinâmicas
Para criar uma rota dinâmica:
- Crie um arquivo com nome entre chaves (ex: [id].tsx)
- O nome entre chaves se torna um parâmetro acessível na rota
- Qualquer valor após a barra na URL será capturado como parâmetro
Exemplo de estrutura de arquivo: app/ordens/[id].tsx
Navegação com Parâmetros
Existem duas formas principais de navegar para rotas dinâmicas:
1. Direto na URL
router.push('/ordens/12345')2. Enviando objeto com parâmetros
1router.push({ pathname: '/ordens/[id]', params: { id: '12345' } })Acessando Parâmetros
Na tela de destino ([id].tsx), os parâmetros são automaticamente disponibilizados:
- O valor da URL (12345) fica disponível como
params.id - Parâmetros adicionais enviados via objeto também são acessíveis
Casos de Uso
Rotas dinâmicas são especialmente úteis para:
- Deep links - Abertura direta em conteúdo específico
- Páginas de detalhes (produtos, pedidos, usuários)
- Compartilhamento de conteúdo específico do app
Considerações Finais
As rotas dinâmicas no Expo Router trazem uma flexibilidade poderosa para nossos aplicativos, permitindo criar navegações complexas com simplicidade. A sintaxe com colchetes [param] mantém a consistência com outros frameworks como Next.js.
