Redirecionamentos e Rotas de Índice

Q: Qual é a diferença entre índice e redirecionamento?

Índice é uma tela real no caminho padrão de uma pasta. Redirecionamento envia a navegação para outro lugar sem renderizar conteúdo. Use app/index.tsx como um hub de redirecionamento fino; coloque a UI da página inicial em (tabs)/index.tsx.

Q: Redirecionamento vs router.replace?

é declarativo - renderiza quando a condição é verdadeira. router.replace é imperativo - chame após signIn() ser concluído. Ambos evitam entradas na pilha de retorno quando configurados corretamente.

Q: Como evito o retorno para o login após o login?

Nunca use push para o aplicativo principal a partir do login. Limpe a pilha de autenticação com replace.

Q: Como faço o logout?

Também queryClient.clear() e reinicie as pilhas de abas - remonte com key no layout raiz, se necessário.

Q: Posso redirecionar para uma URL externa?

Use expo-linking openURL para sites externos. é apenas para rotas dentro do aplicativo.

Q: E os fluxos de onboarding?

Encadeie condições em app/index.tsx - ordenadas da mais específica para a padrão.

Q: Como funcionam as rotas de índice em pastas aninhadas?

app/orders/index.tsx serve /orders. Navegar para /orders mostra a lista; /orders/42 empurra [id].tsx na pilha de pedidos.

Q: Usuários logados devem acessar /login?

Opcionalmente redirecione em (auth)/_layout.tsx: Impede a tela de login marcada nos favoritos quando já autenticado.

Q: Como testo a lógica de redirecionamento?

Use expo-router/testing-library renderRouter com provedores de sessão mockados. Afirme os destinos de Redirect inspecionando o estado de navegação após waitFor.

Telas de destino padrão e pontos de entrada com acesso restrito por autenticação. Arquivos index.tsx definem as rotas padrão para suas pastas; <Redirect /> e router.replace enviam os usuários para a estrutura correta sem poluir a pilha de retorno.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

app/
├── _layout.tsx
├── index.tsx              # / - hub de redirecionamento de autenticação
├── (auth)/
│   ├── login.tsx          # /login
│   └── register.tsx
└── (app)/
    └── (tabs)/
        ├── _layout.tsx
        └── index.tsx      # / - tela inicial real quando logado

// app/index.tsx - hub de redirecionamento
import { Redirect } from "expo-router";
import { useSession } from "@/features/auth";
 
export default function Index() {
  const { session, isLoading } = useSession();
 
  if (isLoading) return null;
 
  if (session) {
    return <Redirect href="/(tabs)" />;
  }
 
  return <Redirect href="/login" />;
}

// Após o login - substituição imperativa
import { router } from "expo-router";
 
router.replace("/(tabs)");

Quando usar isso:

Ponto de entrada com acesso restrito por autenticação - usuários logados pulam o login; convidados pulam as abas
Marketing / → /home - suporte a caminhos legados
Conclusão do onboarding - replace para o aplicativo principal
Destino baseado em função - aba padrão de administrador vs. usuário

Exemplo de Trabalho

Provedor de sessão, hub de redirecionamento raiz, layout de grupo de aplicativos protegido e substituição pós-login.

// features/auth/model/useSession.tsx (simplificado)
import { createContext, useContext, useEffect, useState } from "react";
 
type Session = { userId: string } | null;
 
const SessionContext = createContext<{
  session: Session;
  isLoading: boolean;
  signIn: () => void;
  signOut: () => void;
}>({ session: null, isLoading: true, signIn: () => {}, signOut: () => {} });
 
export function SessionProvider({ children }: { children: React.ReactNode }) {
  const [session, setSession] = useState<Session>(null);
  const [isLoading, setLoading] = useState(true);
 
  useEffect(() => {
    // Hidratar do SecureStore - veja a seção de sessão de autenticação
    const timer = setTimeout(() => {
      setSession(null);
      setLoading(false);
    }, 300);
    return () => clearTimeout(timer);
  }, []);
 
  return (
    <SessionContext.Provider
      value={{
        session,
        isLoading,
        signIn: () => setSession({ userId: "1" }),
        signOut: () => setSession(null),
      }}
    >
      {children}
    </SessionContext.Provider>
  );
}
 
export const useSession = () => useContext(SessionContext);

// app/_layout.tsx
import { Stack } from "expo-router";
import { SessionProvider } from "@/features/auth";
 
export default function RootLayout() {
  return (
    <SessionProvider>
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Screen name="index" />
        <Stack.Screen name="(auth)" />
        <Stack.Screen name="(app)" />
      </Stack>
    </SessionProvider>
  );
}

// app/index.tsx
import { Redirect } from "expo-router";
import { ActivityIndicator, View } from "react-native";
import { useSession } from "@/features/auth";
 
export default function RootIndex() {
  const { session, isLoading } = useSession();
 
  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <ActivityIndicator />
      </View>
    );
  }
 
  if (session) {
    return <Redirect href="/(tabs)" />;
  }
 
  return <Redirect href="/login" />;
}

// app/(app)/_layout.tsx - proteção adicional
import { Redirect, Stack } from "expo-router";
import { useSession } from "@/features/auth";
 
export default function AppGroupLayout() {
  const { session, isLoading } = useSession();
 
  if (isLoading) return null;
  if (!session) return <Redirect href="/login" />;
 
  return <Stack screenOptions={{ headerShown: false }} />;
}

// app/(auth)/login.tsx (trecho)
import { router } from "expo-router";
import { Pressable, Text, View } from "react-native";
import { useSession } from "@/features/auth";
 
export default function LoginScreen() {
  const { signIn } = useSession();
 
  return (
    <View style={{ flex: 1, justifyContent: "center", padding: 16 }}>
      <Pressable
        onPress={() => {
          signIn();
          router.replace("/(tabs)");
        }}
      >
        <Text>Entrar</Text>
      </Pressable>
    </View>
  );
}

// app/(app)/(tabs)/index.tsx - conteúdo real da página inicial
import { Text, View } from "react-native";
 
export default function HomeScreen() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text>Início</Text>
    </View>
  );
}

Mergulho Profundo

Resolução da rota de índice

app/index.tsx                    → /
app/orders/index.tsx             → /orders
app/(app)/(tabs)/index.tsx       → /   (quando o grupo (app) está ativo)

Apenas um arquivo deve possuir / para um determinado estado de navegação - use app/index.tsx raiz como hub
O índice da pasta é a lista/tela padrão para esse segmento
index.tsx vs orders.tsx - escolha um; misturar cria duplicatas confusas

Mecanismos de redirecionamento

Mecanismo	API	Pilha de retorno	Caso de uso
`<Redirect href>`	Declarativo na renderização	Substitui a entrada atual	Hub de autenticação, proteções de layout
`router.replace`	Imperativo	Sem retorno ao anterior	Pós-login, logout
`router.push`	Imperativo	Preserva o retorno	Não para portões de autenticação
`<Link replace>`	Toque declarativo	Substituir na navegação	Raro; prefira `router` após assíncrono

// Padrão de proteção de layout
if (!session) return <Redirect href="/login" />;

Sequência de entrada com acesso restrito por autenticação

1. _layout raiz monta SessionProvider
2. app/index.tsx espera por isLoading === false
3. session ? Redirect → /(tabs) : Redirect → /login
4. (app)/_layout.tsx re-verifica a sessão (proteção de link direto)
5. Sucesso no login → router.replace("/(tabs)")
6. Logout → router.replace("/login")

Guarda dupla - hub raiz + (app)/_layout captura links diretos para /settings quando deslogado
UI de carregamento - nunca redirecione enquanto a sessão estiver hidratando; evita o flash da tela de login
Usuário logado em /login - opcionalmente redirecione para /(tabs) de (auth)/_layout.tsx

Logout e reinício da pilha

function signOut() {
  clearSession();
  router.replace("/login");
}

Para estado de pilha persistente, remonte os navegadores:

// app/_layout.tsx
const { session } = useSession();
return <Stack key={session?.userId ?? "guest"} />;

Armadilhas

Redirecionamento antes da hidratação da sessão - os usuários piscam através de login → início → login. Correção: Porta isLoading com spinner ou splash.
Dois índices de rota em / - (auth)/index.tsx e (app)/index.tsx entram em conflito. Correção: Hub único app/index.tsx.
router.push após o login - o retorno por gesto expõe as credenciais. Correção: router.replace.
Loop de redirecionamento infinito - (app) layout redireciona para /login enquanto o login redireciona para /(tabs) antes que a sessão seja atualizada. Correção: Garanta que signIn defina a sessão antes de router.replace.
Link direto para rota protegida - /settings ignora o hub. Correção: Proteção em (app)/_layout.tsx, não apenas em app/index.tsx.
Redirecionamento em cada tela filha - a lógica duplicada se desvia. Correção: <Redirect> no nível do layout uma vez por grupo.
href="/(tabs)" vs href="/" - ambos podem funcionar, mas significam coisas diferentes quando os grupos mudam. Correção: Prefira o caminho raiz da aba explícito; use Href tipado.

Alternativas

Alternativa	Use Quando	Não Use Quando
`app/index.tsx` + `<Redirect>`	Porta de autenticação padrão	Você precisa de redirecionamento assíncrono do lado do servidor (use middleware web)
Apenas proteção `(app)/_layout`	Aplicativos simples	Links diretos também devem ser protegidos - o hub ainda é recomendado
`router.replace` pós-login	Imperativo após mutação	Roteamento inicial de inicialização a frio
Espera da tela de splash	Hidratação longa (1s+)	Leitura rápida do SecureStore - spinner é suficiente
`initialRouteName` do React Navigation	RN manual sem arquivos	Entrada baseada em arquivo do Expo Router
Redirecionamento por flag de recurso	Modo de manutenção	Roteamento de autenticação por usuário

FAQs

Qual é a diferença entre índice e redirecionamento?

Índice é uma tela real no caminho padrão de uma pasta. Redirecionamento envia a navegação para outro lugar sem renderizar conteúdo. Use app/index.tsx como um hub de redirecionamento fino; coloque a UI da página inicial em (tabs)/index.tsx.

Redirecionamento vs router.replace?

<Redirect> é declarativo - renderiza quando a condição é verdadeira. router.replace é imperativo - chame após signIn() ser concluído. Ambos evitam entradas na pilha de retorno quando configurados corretamente.

Como evito o retorno para o login após o login?

router.replace("/(tabs)");

Nunca use push para o aplicativo principal a partir do login. Limpe a pilha de autenticação com replace.

Como faço o logout?

await clearTokens();
router.replace("/login");

Também queryClient.clear() e reinicie as pilhas de abas - remonte com key no layout raiz, se necessário.

Posso redirecionar para uma URL externa?

Use expo-linking openURL para sites externos. <Redirect> é apenas para rotas dentro do aplicativo.

Como funcionam os redirecionamentos baseados em função?

if (session?.role === "admin") return <Redirect href="/admin" />;
return <Redirect href="/(tabs)" />;

Mantenha a lógica de função no modelo de sessão - o hub de índice lê um único hook useSession().

E os fluxos de onboarding?

if (!session) return <Redirect href="/login" />;
if (!session.onboardingDone) return <Redirect href="/onboarding" />;
return <Redirect href="/(tabs)" />;

Encadeie condições em app/index.tsx - ordenadas da mais específica para a padrão.

Como funcionam as rotas de índice em pastas aninhadas?

app/orders/index.tsx serve /orders. Navegar para /orders mostra a lista; /orders/42 empurra [id].tsx na pilha de pedidos.

Usuários logados devem acessar /login?

Opcionalmente redirecione em (auth)/_layout.tsx:

if (session) return <Redirect href="/(tabs)" />;

Impede a tela de login marcada nos favoritos quando já autenticado.

Como testo a lógica de redirecionamento?

Use expo-router/testing-library renderRouter com provedores de sessão mockados. Afirme os destinos de Redirect inspecionando o estado de navegação após waitFor.

Relacionados

Grupos de Rotas e Organizando app/ - divisão (auth) vs (app)
Link & href - replace vs push
Rotas Tipadas - Redirect href com segurança de tipo
Noções Básicas do Expo Router - fundamentos da rota de índice
../auth-session/mobile-auth-basics/mobile-auth-basics.md - hidratação da sessão
../expo-rules/navigation-and-routing-rules/navigation-and-routing-rules.md - regras de revisão de portão de autenticação

Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

app/
├── _layout.tsx
├── index.tsx              # / - hub de redirecionamento de autenticação
├── (auth)/
│   ├── login.tsx          # /login
│   └── register.tsx
└── (app)/
    └── (tabs)/
        ├── _layout.tsx
        └── index.tsx      # / - tela inicial real quando logado

// app/index.tsx - hub de redirecionamento
import { Redirect } from "expo-router";
import { useSession } from "@/features/auth";
 
export default function Index() {
  const { session, isLoading } = useSession();
 
  if (isLoading) return null;
 
  if (session) {
    return <Redirect href="/(tabs)" />;
  }
 
  return <Redirect href="/login" />;
}

// Após o login - substituição imperativa
import { router } from "expo-router";
 
router.replace("/(tabs)");

Quando usar isso:

Ponto de entrada com acesso restrito por autenticação - usuários logados pulam o login; convidados pulam as abas
Marketing / → /home - suporte a caminhos legados
Conclusão do onboarding - replace para o aplicativo principal
Destino baseado em função - aba padrão de administrador vs. usuário

Exemplo de Trabalho

Provedor de sessão, hub de redirecionamento raiz, layout de grupo de aplicativos protegido e substituição pós-login.

// features/auth/model/useSession.tsx (simplificado)
import { createContext, useContext, useEffect, useState } from "react";
 
type Session = { userId: string } | null;
 
const SessionContext = createContext<{
  session: Session;
  isLoading: boolean;
  signIn: () => void;
  signOut: () => void;
}>({ session: null, isLoading: true, signIn: () => {}, signOut: () => {} });
 
export function SessionProvider({ children }: { children: React.ReactNode }) {
  const [session, setSession] = useState<Session>(null);
  const [isLoading, setLoading] = useState(true);
 
  useEffect(() => {
    // Hidratar do SecureStore - veja a seção de sessão de autenticação
    const timer = setTimeout(() => {
      setSession(null);
      setLoading(false);
    }, 300);
    return () => clearTimeout(timer);
  }, []);
 
  return (
    <SessionContext.Provider
      value={{
        session,
        isLoading,
        signIn: () => setSession({ userId: "1" }),
        signOut: () => setSession(null),
      }}
    >
      {children}
    </SessionContext.Provider>
  );
}
 
export const useSession = () => useContext(SessionContext);

// app/_layout.tsx
import { Stack } from "expo-router";
import { SessionProvider } from "@/features/auth";
 
export default function RootLayout() {
  return (
    <SessionProvider>
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Screen name="index" />
        <Stack.Screen name="(auth)" />
        <Stack.Screen name="(app)" />
      </Stack>
    </SessionProvider>
  );
}

// app/index.tsx
import { Redirect } from "expo-router";
import { ActivityIndicator, View } from "react-native";
import { useSession } from "@/features/auth";
 
export default function RootIndex() {
  const { session, isLoading } = useSession();
 
  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <ActivityIndicator />
      </View>
    );
  }
 
  if (session) {
    return <Redirect href="/(tabs)" />;
  }
 
  return <Redirect href="/login" />;
}

// app/(app)/_layout.tsx - proteção adicional
import { Redirect, Stack } from "expo-router";
import { useSession } from "@/features/auth";
 
export default function AppGroupLayout() {
  const { session, isLoading } = useSession();
 
  if (isLoading) return null;
  if (!session) return <Redirect href="/login" />;
 
  return <Stack screenOptions={{ headerShown: false }} />;
}

// app/(auth)/login.tsx (trecho)
import { router } from "expo-router";
import { Pressable, Text, View } from "react-native";
import { useSession } from "@/features/auth";
 
export default function LoginScreen() {
  const { signIn } = useSession();
 
  return (
    <View style={{ flex: 1, justifyContent: "center", padding: 16 }}>
      <Pressable
        onPress={() => {
          signIn();
          router.replace("/(tabs)");
        }}
      >
        <Text>Entrar</Text>
      </Pressable>
    </View>
  );
}

// app/(app)/(tabs)/index.tsx - conteúdo real da página inicial
import { Text, View } from "react-native";
 
export default function HomeScreen() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text>Início</Text>
    </View>
  );
}

Mergulho Profundo

Resolução da rota de índice

app/index.tsx                    → /
app/orders/index.tsx             → /orders
app/(app)/(tabs)/index.tsx       → /   (quando o grupo (app) está ativo)

Apenas um arquivo deve possuir / para um determinado estado de navegação - use app/index.tsx raiz como hub
O índice da pasta é a lista/tela padrão para esse segmento
index.tsx vs orders.tsx - escolha um; misturar cria duplicatas confusas

Mecanismos de redirecionamento

Mecanismo	API	Pilha de retorno	Caso de uso
`<Redirect href>`	Declarativo na renderização	Substitui a entrada atual	Hub de autenticação, proteções de layout
`router.replace`	Imperativo	Sem retorno ao anterior	Pós-login, logout
`router.push`	Imperativo	Preserva o retorno	Não para portões de autenticação
`<Link replace>`	Toque declarativo	Substituir na navegação	Raro; prefira `router` após assíncrono

// Padrão de proteção de layout
if (!session) return <Redirect href="/login" />;

Sequência de entrada com acesso restrito por autenticação

1. _layout raiz monta SessionProvider
2. app/index.tsx espera por isLoading === false
3. session ? Redirect → /(tabs) : Redirect → /login
4. (app)/_layout.tsx re-verifica a sessão (proteção de link direto)
5. Sucesso no login → router.replace("/(tabs)")
6. Logout → router.replace("/login")

Guarda dupla - hub raiz + (app)/_layout captura links diretos para /settings quando deslogado
UI de carregamento - nunca redirecione enquanto a sessão estiver hidratando; evita o flash da tela de login
Usuário logado em /login - opcionalmente redirecione para /(tabs) de (auth)/_layout.tsx

Logout e reinício da pilha

function signOut() {
  clearSession();
  router.replace("/login");
}

Para estado de pilha persistente, remonte os navegadores:

// app/_layout.tsx
const { session } = useSession();
return <Stack key={session?.userId ?? "guest"} />;

Armadilhas

Redirecionamento antes da hidratação da sessão - os usuários piscam através de login → início → login. Correção: Porta isLoading com spinner ou splash.
Dois índices de rota em / - (auth)/index.tsx e (app)/index.tsx entram em conflito. Correção: Hub único app/index.tsx.
router.push após o login - o retorno por gesto expõe as credenciais. Correção: router.replace.
Loop de redirecionamento infinito - (app) layout redireciona para /login enquanto o login redireciona para /(tabs) antes que a sessão seja atualizada. Correção: Garanta que signIn defina a sessão antes de router.replace.
Link direto para rota protegida - /settings ignora o hub. Correção: Proteção em (app)/_layout.tsx, não apenas em app/index.tsx.
Redirecionamento em cada tela filha - a lógica duplicada se desvia. Correção: <Redirect> no nível do layout uma vez por grupo.
href="/(tabs)" vs href="/" - ambos podem funcionar, mas significam coisas diferentes quando os grupos mudam. Correção: Prefira o caminho raiz da aba explícito; use Href tipado.

Alternativas

Alternativa	Use Quando	Não Use Quando
`app/index.tsx` + `<Redirect>`	Porta de autenticação padrão	Você precisa de redirecionamento assíncrono do lado do servidor (use middleware web)
Apenas proteção `(app)/_layout`	Aplicativos simples	Links diretos também devem ser protegidos - o hub ainda é recomendado
`router.replace` pós-login	Imperativo após mutação	Roteamento inicial de inicialização a frio
Espera da tela de splash	Hidratação longa (1s+)	Leitura rápida do SecureStore - spinner é suficiente
`initialRouteName` do React Navigation	RN manual sem arquivos	Entrada baseada em arquivo do Expo Router
Redirecionamento por flag de recurso	Modo de manutenção	Roteamento de autenticação por usuário

FAQs

Qual é a diferença entre índice e redirecionamento?

Redirecionamento vs router.replace?

Como evito o retorno para o login após o login?

router.replace("/(tabs)");

Nunca use push para o aplicativo principal a partir do login. Limpe a pilha de autenticação com replace.

Como faço o logout?

await clearTokens();
router.replace("/login");

Também queryClient.clear() e reinicie as pilhas de abas - remonte com key no layout raiz, se necessário.

Posso redirecionar para uma URL externa?

Use expo-linking openURL para sites externos. <Redirect> é apenas para rotas dentro do aplicativo.

Como funcionam os redirecionamentos baseados em função?

if (session?.role === "admin") return <Redirect href="/admin" />;
return <Redirect href="/(tabs)" />;

Mantenha a lógica de função no modelo de sessão - o hub de índice lê um único hook useSession().

E os fluxos de onboarding?

if (!session) return <Redirect href="/login" />;
if (!session.onboardingDone) return <Redirect href="/onboarding" />;
return <Redirect href="/(tabs)" />;

Encadeie condições em app/index.tsx - ordenadas da mais específica para a padrão.

Como funcionam as rotas de índice em pastas aninhadas?

app/orders/index.tsx serve /orders. Navegar para /orders mostra a lista; /orders/42 empurra [id].tsx na pilha de pedidos.

Usuários logados devem acessar /login?

Opcionalmente redirecione em (auth)/_layout.tsx:

if (session) return <Redirect href="/(tabs)" />;

Impede a tela de login marcada nos favoritos quando já autenticado.

Como testo a lógica de redirecionamento?

Use expo-router/testing-library renderRouter com provedores de sessão mockados. Afirme os destinos de Redirect inspecionando o estado de navegação após waitFor.

Relacionados

Grupos de Rotas e Organizando app/ - divisão (auth) vs (app)
Link & href - replace vs push
Rotas Tipadas - Redirect href com segurança de tipo
Noções Básicas do Expo Router - fundamentos da rota de índice
../auth-session/mobile-auth-basics/mobile-auth-basics.md - hidratação da sessão
../expo-rules/navigation-and-routing-rules/navigation-and-routing-rules.md - regras de revisão de portão de autenticação

Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).

Redirecionamentos e Rotas de Índice

Buscar na documentação

Redirecionamentos e Rotas de Índice