Matricule-se
Voltar para o blog
Dicas da Hashtag

Expo Router: entenda o que é e como usá-lo na prática

Heitor Catunda

Se você está desenvolvendo um aplicativo com React Native usando o Expo e quer simplificar a navegação entre telas, entender o que é Expo Router pode ser um divisor de águas na sua jornada.

Organizar rotas, manter código limpo e escalar um projeto com diversas telas pode ser uma dor de cabeça. Mas e se a estrutura de navegação pudesse se organizar automaticamente, baseada em arquivos e pastas? Pois é exatamente essa a proposta do Expo Router.

Neste artigo, vamos te explicar em detalhes o que é o Expo Router, como ele funciona, suas vantagens, diferenças em relação ao React Navigation e um passo a passo prático para começar a usá-lo.

O que é o Expo Router?

O Expo Router é uma ferramenta de roteamento baseada em arquivos que foi integrada ao ecossistema do Expo para facilitar a construção de apps React Native.

Com ele, não é mais necessário criar rotas manualmente com createNativeStackNavigator ou manter grandes arquivos de configuração. Basta criar pastas e arquivos dentro de uma estrutura específica.

De onde surgiu o Expo Router?

A ideia do Expo Router nasceu da inspiração no Next.js, um framework React para web que usa a técnica de file-based routing, onde a estrutura de arquivos da aplicação define automaticamente as rotas disponíveis.

Essa abordagem simplifica muito o gerenciamento da navegação e reduz significativamente o código repetitivo (boilerplate).

O time do Expo percebeu que essa lógica fazia total sentido para o ambiente mobile também.

Assim, desenvolveram o Expo Router como parte nativa da CLI do Expo, integrando-o de forma fluida com ferramentas já conhecidas como o Metro Bundler e o React Navigation.

Como funciona a navegação baseada em arquivos?

Antes de entrar nos detalhes práticos, vale explicar como a navegação baseada em arquivos muda completamente o fluxo de desenvolvimento.

O que é file-based routing?

O file-based routing é uma abordagem em que o nome e a organização dos arquivos no diretório determinam as rotas da aplicação. Ou seja, ao invés de configurar uma rota manualmente, você cria um arquivo home.js e, automaticamente, ele se transforma na rota /home.

Essa lógica facilita muito a leitura da estrutura do projeto e elimina a necessidade de navegar por arquivos longos só para encontrar onde está definida uma determinada tela.

Como os nomes de arquivos se transformam em rotas

Por exemplo, ao criar o seguinte diretório:

app/

  index.js

  about.js

  products/

    index.js

    [id].js

O Expo Router vai interpretar isso como:

  • / → index.js
  • /about → about.js
  • /products → products/index.js
  • /products/:id → products/[id].js

Assim, o próprio nome do arquivo [id].js já indica que é uma rota dinâmica. Simples e direto.

Principais vantagens do Expo Router

O Expo Router se tornou rapidamente uma das funcionalidades mais queridas por quem trabalha com React Native. Mas o que exatamente faz dele tão especial?

Menos boilerplate, mais produtividade

Ao eliminar a necessidade de configurar stacks e tabs manualmente, o Expo Router permite que você se concentre no que realmente importa: construir as telas e funcionalidades do app. Toda a lógica de navegação já vem pronta, e isso economiza dezenas de linhas de código repetitivo.

Além disso, a curva de aprendizado é bem mais suave, especialmente para quem já usou Next.js. Isso torna o processo de criação mais ágil e intuitivo, reduzindo a chance de bugs relacionados a rotas mal configuradas.

Melhor organização e escalabilidade do projeto

Com uma estrutura baseada em diretórios, fica mais fácil localizar e organizar cada parte da navegação. Projetos grandes ganham com essa abordagem, pois ela impõe um padrão lógico e visual que ajuda na manutenção e escalabilidade.

Você não precisa mais manter um arquivo com 300 linhas só para definir rotas, basta navegar pela estrutura de pastas para entender como o app está montado.

Ícone ComunidadeComunidade
 Impressionadora

Aprenda, em um só lugar, as habilidades mais importantes do mercado — do básico ao avançado. Desenvolva projetos práticos e se torne um profissional pronto para se destacar.

Começar agoraSeta para a direita
Fundo ComunidadeTelas Comunidade

Expo Router vs React Navigation

Se você está acostumado com o React Navigation, talvez esteja se perguntando qual a diferença prática entre ele e o Expo Router. Spoiler: o Expo Router usa o React Navigation por baixo dos panos.

Diferenças na experiência do desenvolvedor

A principal diferença está na abstração. Enquanto o React Navigation exige que você crie e configure stacks, tabs e rotas explicitamente, o Expo Router faz isso automaticamente a partir da estrutura de arquivos. Isso reduz o tempo de configuração e aumenta a legibilidade do projeto.

Outra diferença importante está na forma como o roteamento dinâmico e os layouts são tratados. O Expo Router tem suporte nativo para rotas dinâmicas e persistência de layouts compartilhados, o que exigiria mais configuração manual no React Navigation tradicional.

Entendendo a estrutura de rotas no Expo Router

A estrutura do Expo Router pode parecer simples à primeira vista, mas esconde um poder incrível. Entender como ela funciona é o primeiro passo para dominar a ferramenta.

Rotas dinâmicas com parâmetros

Para criar rotas dinâmicas, basta nomear o arquivo com colchetes. Por exemplo, app/product/[id].js cria uma rota onde :id pode ser substituído por qualquer valor, como /product/42.

Dentro do componente, você pode acessar o valor do parâmetro com o hook useLocalSearchParams().

Essa lógica facilita a criação de rotas detalhadas e reduz bastante a configuração.

Layouts persistentes e compartilhados

Se você quiser que várias páginas compartilhem um mesmo layout (por exemplo, um menu ou header), basta criar um arquivo layout.js dentro do diretório correspondente. Esse layout será aplicado a todas as rotas daquele nível.

Por exemplo:

app/

  layout.js   // layout principal do app

  home.js

  settings/

    layout.js // layout exclusivo das telas de settings

    profile.js

    notifications.js

Com isso, fica fácil aplicar consistência visual e estrutural sem repetir componentes em cada tela.

Como configurar o Expo Router no seu projeto passo a passo

Agora que você entendeu como o Expo Router funciona, é hora de colocar a mão na massa. Vamos ver como configurar e criar suas primeiras rotas.

Instalando o Expo Router

Primeiro, crie um novo projeto com Expo:

npx create-expo-app meu-app

Depois, instale o Expo Router:

npx expo install expo-router react-native-safe-area-context react-native-screens react-native-gesture-handler

Por fim, crie uma pasta chamada app na raiz do projeto. Essa pasta será o coração da navegação.

Criando sua primeira rota

Crie um arquivo index.js dentro da pasta app com o seguinte conteúdo:

import { Text, View } from ‘react-native’;

export default function HomeScreen() {

  return (

    <View><Text>Bem-vindo à tela inicial!</Text></View>

  );

}

Pronto! Agora, ao iniciar seu app, essa será a primeira tela exibida.

Para navegar entre páginas, você pode usar o componente Link:

import { Link } from ‘expo-router’;

<Link href=”/quem-somos”>Ir para Sobre</Link>

Ou, para uma navegação programática:

import { router } from ‘expo-router’;

router.push(‘/about’);

Ambas as formas são simples e fazem parte do pacote expo-router, sem necessidade de configuração extra.

Exemplo prático: três telas com Expo Router

Crie os seguintes arquivos dentro da pasta app:

  • index.js → Tela Home
  • about.js → Tela Sobre
  • products/[id].js → Tela de Produto com ID dinâmico

Com isso, você terá:

  • / para a Home
  • /about para a página Sobre
  • /products/42 para o produto com ID 42

E tudo isso sem precisar declarar manualmente nenhuma rota!

Funcionalidades avançadas para turbinar sua navegação

Além do básico, o Expo Router oferece recursos avançados que permitem um controle maior da navegação e da experiência do usuário.

Um desses recursos é a criação de rotas protegidas, muito útil quando você precisa implementar autenticação.

Como criar rotas protegidas (auth guard)

Você pode criar rotas protegidas criando um layout que verifica o status de autenticação antes de renderizar o conteúdo da página.

Por exemplo, dentro do diretório app/protected, crie um layout.js com a seguinte lógica:

import { useAuth } from ‘…’;

import { Redirect, Slot } from ‘expo-router’;

export default function ProtectedLayout() {

  const { user } = useAuth();

  if (!user) return <Redirect href=”/login” />;

  return <Slot />;

}

Com isso, qualquer rota dentro de /protected só será acessível por usuários logados.

Vale a pena usar o Expo Router?

Se você busca mais produtividade, uma estrutura de navegação escalável e uma experiência de desenvolvimento mais moderna, o Expo Router é uma excelente escolha.

Ele é especialmente vantajoso para times que precisam organizar projetos grandes ou para quem já está habituado com o paradigma do Next.js.

Claro, existem casos em que o React Navigation tradicional ainda pode ser útil, principalmente se você precisa de customizações muito específicas no controle das rotas. Mas, para a grande maioria dos projetos, o Expo Router entrega simplicidade, robustez e velocidade.

Conclusão

Neste artigo, você entendeu o que é o Expo Router, como ele funciona por meio da navegação baseada em arquivos e quais os principais benefícios em adotá-lo nos seus projetos com React Native e Expo.

Além disso, mostramos como configurar o ambiente, criar rotas simples e dinâmicas, trabalhar com layouts persistentes, usar navegação com Link e router.push, e até proteger rotas com autenticação.

Para quem busca evoluir em desenvolvimento mobile com boas práticas, organização de código e foco em produtividade, o Expo Router é uma ferramenta que merece atenção.

Se você quer dominar o React Native e construir aplicações de verdade com as tecnologias mais atuais do mercado, conheça a formação da Hashtag Treinamentos.

Lá você vai encontrar conteúdos atualizados, suporte contínuo e projetos práticos para turbinar sua carreira em desenvolvimento.

Hashtag Treinamentos

Para acessar outras publicações de Ciência de Dados, clique aqui!

Quer aprender mais sobre Python com um minicurso básico gratuito?

Posts mais recentes de Ciência de Dados

Posts mais recentes da Hashtag Treinamentos

Heitor Catunda

Autor do artigo

Heitor Catunda

Gerente de Operações e Especialista em Excel

Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.

Ver mais posts