Redirecciones y Rutas de Índice

Q: ¿Cuál es la diferencia entre índice y redirección?

El índice es una pantalla real en la ruta predeterminada de una carpeta. La redirección envía la navegación a otra parte sin renderizar contenido. Usa app/index.tsx como un centro de redirección delgado; coloca la UI de inicio en (tabs)/index.tsx.

Q: ¿Cómo evito volver al inicio de sesión después de registrarme?

Nunca hagas push a la aplicación principal desde el inicio de sesión. Borra la pila de autenticación con replace.

Q: ¿Cómo manejo el cierre de sesión?

También queryClient.clear() y reinicia las pilas de pestañas - remonta con key en el diseño raíz si es necesario.

Q: ¿Puedo redirigir a una URL externa?

Usa expo-linking openURL para sitios externos. es solo para rutas dentro de la aplicación.

Q: ¿Qué hay de los flujos de incorporación?

Encadena las condiciones en app/index.tsx - ordenadas de más específica a predeterminada.

Q: ¿Cómo funcionan las rutas de índice en carpetas anidadas?

app/orders/index.tsx sirve /orders. Navegar a /orders muestra la lista; /orders/42 empuja [id].tsx en la pila de órdenes.

Q: ¿Deben los usuarios registrados acceder a /login?

Opcionalmente redirige en (auth)/_layout.tsx: Previene la pantalla de inicio de sesión marcada cuando ya está autenticado.

Q: ¿Cómo pruebo la lógica de redirección?

Usa expo-router/testing-library renderRouter con proveedores de sesión simulados. Afirma destinos Redirect inspeccionando el estado de navegación después de waitFor.

Pantallas de destino predeterminadas y puntos de entrada con control de autenticación. Los archivos index.tsx definen rutas predeterminadas para su carpeta; <Redirect /> y router.replace envían a los usuarios a la interfaz correcta sin contaminar la pila de navegación.

Receta

Tarjeta de referencia rápida - lista para copiar y pegar.

app/
├── _layout.tsx
├── index.tsx              # / - centro de redirección de autenticación
├── (auth)/
│   ├── login.tsx          # /login
│   └── register.tsx
└── (app)/
    └── (tabs)/
        ├── _layout.tsx
        └── index.tsx      # / - inicio real cuando estás registrado

// app/index.tsx - centro de redirección
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" />;
}

// Después del inicio de sesión - reemplazo imperativo
import { router } from "expo-router";
 
router.replace("/(tabs)");

Cuándo usarlo:

Entrada con control de autenticación - los usuarios registrados omiten el inicio de sesión; los invitados omiten las pestañas
Marketing / → /home - soporte de ruta heredada
Finalización de incorporación - replace a la aplicación principal
Destino basado en roles - pestaña predeterminada de administrador vs usuario

Ejemplo de Funcionamiento

Proveedor de sesión, centro de redirección raíz, diseño de grupo de aplicación protegido y reemplazo posterior al inicio de sesión.

// 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 desde SecureStore - ver sección auth-session
    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 - protección de cinturón y tirantes
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 (extracto)
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>Iniciar sesión</Text>
      </Pressable>
    </View>
  );
}

// app/(app)/(tabs)/index.tsx - contenido de inicio real
import { Text, View } from "react-native";
 
export default function HomeScreen() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text>Inicio</Text>
    </View>
  );
}

Profundización

Resolución de rutas de índice

app/index.tsx                    → /
app/orders/index.tsx             → /orders
app/(app)/(tabs)/index.tsx       → /   (cuando el grupo (app) está activo)

Solo un archivo debe ser propietario de / para un estado de navegación dado - usa app/index.tsx raíz como centro
El índice de la carpeta es la pantalla de lista/predeterminada para ese segmento
index.tsx vs orders.tsx - elige uno; mezclarlos crea duplicados confusos

Mecanismos de redirección

Mecanismo	API	Pila de navegación	Caso de uso
`<Redirect href>`	Declarativo en render	Reemplaza la entrada actual	Centro de autenticación, protecciones de diseño
`router.replace`	Imperativo	Sin volver atrás	Posterior al inicio de sesión, cierre de sesión
`router.push`	Imperativo	Preserva atrás	No para puertas de autenticación
`<Link replace>`	Tap declarativo	Reemplazar al navegar	Raro; preferir router después de async

// Patrón de protección de diseño
if (!session) return <Redirect href="/login" />;

Secuencia de entrada con control de autenticación

1. Root _layout monta SessionProvider
2. app/index.tsx espera a que isLoading === false
3. session ? Redirect → /(tabs) : Redirect → /login
4. (app)/_layout.tsx recomprueba la sesión (protección de enlace profundo)
5. Éxito de inicio de sesión → router.replace("/(tabs)")
6. Cierre de sesión → router.replace("/login")

Protección doble - centro raíz + (app)/_layout captura enlaces profundos a /settings cuando no estás registrado
UI de carga - nunca redirijas mientras la sesión se hidrata; evita el parpadeo de la pantalla de inicio de sesión
Usuario registrado en /login - opcionalmente redirige a /(tabs) desde (auth)/_layout.tsx

Cierre de sesión y reinicio de pila

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

Para un estado de pila obstinado, remonta navegadores:

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

Errores Comunes

Redirigir antes de la hidratación de sesión - los usuarios parpadean a través de inicio de sesión → inicio → inicio de sesión. Solución: Puerta isLoading con spinner o splash.
Dos rutas de índice en / - (auth)/index.tsx y (app)/index.tsx entran en conflicto. Solución: Centro app/index.tsx único.
router.push después del inicio de sesión - deslizar atrás expone credenciales. Solución: router.replace.
Bucle de redirección infinita - el diseño (app) redirige a /login mientras el inicio de sesión redirige a /(tabs) antes de que la sesión se actualice. Solución: Asegúrate de que signIn establezca la sesión antes de router.replace.
Enlace profundo a ruta protegida - /settings omite el centro. Solución: Protege en (app)/_layout.tsx, no solo app/index.tsx.
Redirigir en cada pantalla secundaria - lógica duplicada diverge. Solución: Redirect a nivel de diseño una vez por grupo.
href="/(tabs)" vs href="/" - ambos pueden funcionar pero significan cosas diferentes cuando cambian los grupos. Solución: Preferir ruta de pestaña explícita; usar Href tipado.

Alternativas

Alternativa	Úsalo Cuando	No lo Uses Cuando
`app/index.tsx` + `<Redirect>`	Puerta de autenticación estándar	Necesitas redirección asincrónica del lado del servidor (usa middleware web)
Protección de diseño `(app)/_layout` solo	Aplicaciones simples	Los enlaces profundos también deben estar protegidos - centro aún recomendado
`router.replace` posterior al inicio de sesión	Imperativo después de mutación	Enrutamiento de inicio en frío inicial
Retención de pantalla de splash	Hidratación larga (1s+)	Lectura rápida de SecureStore - spinner es suficiente
`initialRouteName` de React Navigation	RN manual sin archivos	Entrada basada en archivos de Expo Router
Redireccionamiento de bandera de característica	Modo de mantenimiento	Enrutamiento de autenticación por usuario

Preguntas Frecuentes

¿Cuál es la diferencia entre índice y redirección?

El índice es una pantalla real en la ruta predeterminada de una carpeta. La redirección envía la navegación a otra parte sin renderizar contenido. Usa app/index.tsx como un centro de redirección delgado; coloca la UI de inicio en (tabs)/index.tsx.

¿Redirección vs router.replace?

<Redirect> es declarativo - renderiza cuando la condición es verdadera. router.replace es imperativo - llama después de que signIn() se complete. Ambos evitan entradas en la pila de navegación cuando se configuran correctamente.

¿Cómo evito volver al inicio de sesión después de registrarme?

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

Nunca hagas push a la aplicación principal desde el inicio de sesión. Borra la pila de autenticación con replace.

¿Cómo manejo el cierre de sesión?

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

También queryClient.clear() y reinicia las pilas de pestañas - remonta con key en el diseño raíz si es necesario.

¿Puedo redirigir a una URL externa?

Usa expo-linking openURL para sitios externos. <Redirect> es solo para rutas dentro de la aplicación.

¿Cómo funcionan las redirecciones basadas en roles?

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

Mantén la lógica de roles en el modelo de sesión - el centro de índice lee un hook useSession().

¿Qué hay de los flujos de incorporación?

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

Encadena las condiciones en app/index.tsx - ordenadas de más específica a predeterminada.

¿Cómo funcionan las rutas de índice en carpetas anidadas?

app/orders/index.tsx sirve /orders. Navegar a /orders muestra la lista; /orders/42 empuja [id].tsx en la pila de órdenes.

¿Deben los usuarios registrados acceder a /login?

Opcionalmente redirige en (auth)/_layout.tsx:

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

Previene la pantalla de inicio de sesión marcada cuando ya está autenticado.

¿Cómo pruebo la lógica de redirección?

Usa expo-router/testing-library renderRouter con proveedores de sesión simulados. Afirma destinos Redirect inspeccionando el estado de navegación después de waitFor.

Relacionado

Grupos de Rutas y Organización de app/ - división (auth) vs (app)
Link y href - replace vs push
Rutas Tipadas - Redirect href type-safe
Conceptos Básicos de Expo Router - fundamentos de ruta de índice
../auth-session/mobile-auth-basics/mobile-auth-basics.md - hidratación de sesión
../expo-rules/navigation-and-routing-rules/navigation-and-routing-rules.md - revisión de reglas de puerta de autenticación

Versiones de Stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).

Receta

Tarjeta de referencia rápida - lista para copiar y pegar.

app/
├── _layout.tsx
├── index.tsx              # / - centro de redirección de autenticación
├── (auth)/
│   ├── login.tsx          # /login
│   └── register.tsx
└── (app)/
    └── (tabs)/
        ├── _layout.tsx
        └── index.tsx      # / - inicio real cuando estás registrado

// app/index.tsx - centro de redirección
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" />;
}

// Después del inicio de sesión - reemplazo imperativo
import { router } from "expo-router";
 
router.replace("/(tabs)");

Cuándo usarlo:

Entrada con control de autenticación - los usuarios registrados omiten el inicio de sesión; los invitados omiten las pestañas
Marketing / → /home - soporte de ruta heredada
Finalización de incorporación - replace a la aplicación principal
Destino basado en roles - pestaña predeterminada de administrador vs usuario

Ejemplo de Funcionamiento

Proveedor de sesión, centro de redirección raíz, diseño de grupo de aplicación protegido y reemplazo posterior al inicio de sesión.

// 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 desde SecureStore - ver sección auth-session
    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 - protección de cinturón y tirantes
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 (extracto)
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>Iniciar sesión</Text>
      </Pressable>
    </View>
  );
}

// app/(app)/(tabs)/index.tsx - contenido de inicio real
import { Text, View } from "react-native";
 
export default function HomeScreen() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text>Inicio</Text>
    </View>
  );
}

Profundización

Resolución de rutas de índice

app/index.tsx                    → /
app/orders/index.tsx             → /orders
app/(app)/(tabs)/index.tsx       → /   (cuando el grupo (app) está activo)

Solo un archivo debe ser propietario de / para un estado de navegación dado - usa app/index.tsx raíz como centro
El índice de la carpeta es la pantalla de lista/predeterminada para ese segmento
index.tsx vs orders.tsx - elige uno; mezclarlos crea duplicados confusos

Mecanismos de redirección

Mecanismo	API	Pila de navegación	Caso de uso
`<Redirect href>`	Declarativo en render	Reemplaza la entrada actual	Centro de autenticación, protecciones de diseño
`router.replace`	Imperativo	Sin volver atrás	Posterior al inicio de sesión, cierre de sesión
`router.push`	Imperativo	Preserva atrás	No para puertas de autenticación
`<Link replace>`	Tap declarativo	Reemplazar al navegar	Raro; preferir router después de async

// Patrón de protección de diseño
if (!session) return <Redirect href="/login" />;

Secuencia de entrada con control de autenticación

1. Root _layout monta SessionProvider
2. app/index.tsx espera a que isLoading === false
3. session ? Redirect → /(tabs) : Redirect → /login
4. (app)/_layout.tsx recomprueba la sesión (protección de enlace profundo)
5. Éxito de inicio de sesión → router.replace("/(tabs)")
6. Cierre de sesión → router.replace("/login")

Protección doble - centro raíz + (app)/_layout captura enlaces profundos a /settings cuando no estás registrado
UI de carga - nunca redirijas mientras la sesión se hidrata; evita el parpadeo de la pantalla de inicio de sesión
Usuario registrado en /login - opcionalmente redirige a /(tabs) desde (auth)/_layout.tsx

Cierre de sesión y reinicio de pila

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

Para un estado de pila obstinado, remonta navegadores:

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

Errores Comunes

Redirigir antes de la hidratación de sesión - los usuarios parpadean a través de inicio de sesión → inicio → inicio de sesión. Solución: Puerta isLoading con spinner o splash.
Dos rutas de índice en / - (auth)/index.tsx y (app)/index.tsx entran en conflicto. Solución: Centro app/index.tsx único.
router.push después del inicio de sesión - deslizar atrás expone credenciales. Solución: router.replace.
Bucle de redirección infinita - el diseño (app) redirige a /login mientras el inicio de sesión redirige a /(tabs) antes de que la sesión se actualice. Solución: Asegúrate de que signIn establezca la sesión antes de router.replace.
Enlace profundo a ruta protegida - /settings omite el centro. Solución: Protege en (app)/_layout.tsx, no solo app/index.tsx.
Redirigir en cada pantalla secundaria - lógica duplicada diverge. Solución: Redirect a nivel de diseño una vez por grupo.
href="/(tabs)" vs href="/" - ambos pueden funcionar pero significan cosas diferentes cuando cambian los grupos. Solución: Preferir ruta de pestaña explícita; usar Href tipado.

Alternativas

Alternativa	Úsalo Cuando	No lo Uses Cuando
`app/index.tsx` + `<Redirect>`	Puerta de autenticación estándar	Necesitas redirección asincrónica del lado del servidor (usa middleware web)
Protección de diseño `(app)/_layout` solo	Aplicaciones simples	Los enlaces profundos también deben estar protegidos - centro aún recomendado
`router.replace` posterior al inicio de sesión	Imperativo después de mutación	Enrutamiento de inicio en frío inicial
Retención de pantalla de splash	Hidratación larga (1s+)	Lectura rápida de SecureStore - spinner es suficiente
`initialRouteName` de React Navigation	RN manual sin archivos	Entrada basada en archivos de Expo Router
Redireccionamiento de bandera de característica	Modo de mantenimiento	Enrutamiento de autenticación por usuario

Preguntas Frecuentes

¿Cuál es la diferencia entre índice y redirección?

¿Redirección vs router.replace?

¿Cómo evito volver al inicio de sesión después de registrarme?

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

Nunca hagas push a la aplicación principal desde el inicio de sesión. Borra la pila de autenticación con replace.

¿Cómo manejo el cierre de sesión?

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

También queryClient.clear() y reinicia las pilas de pestañas - remonta con key en el diseño raíz si es necesario.

¿Puedo redirigir a una URL externa?

Usa expo-linking openURL para sitios externos. <Redirect> es solo para rutas dentro de la aplicación.

¿Cómo funcionan las redirecciones basadas en roles?

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

Mantén la lógica de roles en el modelo de sesión - el centro de índice lee un hook useSession().

¿Qué hay de los flujos de incorporación?

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

Encadena las condiciones en app/index.tsx - ordenadas de más específica a predeterminada.

¿Cómo funcionan las rutas de índice en carpetas anidadas?

app/orders/index.tsx sirve /orders. Navegar a /orders muestra la lista; /orders/42 empuja [id].tsx en la pila de órdenes.

¿Deben los usuarios registrados acceder a /login?

Opcionalmente redirige en (auth)/_layout.tsx:

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

Previene la pantalla de inicio de sesión marcada cuando ya está autenticado.

¿Cómo pruebo la lógica de redirección?

Usa expo-router/testing-library renderRouter con proveedores de sesión simulados. Afirma destinos Redirect inspeccionando el estado de navegación después de waitFor.

Relacionado

Grupos de Rutas y Organización de app/ - división (auth) vs (app)
Link y href - replace vs push
Rutas Tipadas - Redirect href type-safe
Conceptos Básicos de Expo Router - fundamentos de ruta de índice
../auth-session/mobile-auth-basics/mobile-auth-basics.md - hidratación de sesión
../expo-rules/navigation-and-routing-rules/navigation-and-routing-rules.md - revisión de reglas de puerta de autenticación

Versiones de Stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).

Redirecciones y Rutas de Índice

Buscar en la documentación

Redirecciones y Rutas de Índice