Expo Router: el sistema de navegación basado en archivos

¿Por qué Expo Router?

Expo Router revoluciona la navegación en React Native trayendo el paradigma de routing basado en archivos que popularizó Next.js. Si creás un archivo en la carpeta app/, automáticamente se convierte en una ruta. Esto elimina la configuración manual de navegadores y hace la estructura del proyecto más intuitiva. Deepyze adoptó Expo Router como estándar en 2024.

Estructura de carpetas

app/
  _layout.tsx          → Layout raíz (Slot, Stack, Tabs)
  index.tsx            → "/" (pantalla principal)
  perfil.tsx           → "/perfil"
  (tabs)/              → Grupo con Tab Navigator
    _layout.tsx
    inicio.tsx         → Tab "Inicio"
    explorar.tsx       → Tab "Explorar"
    perfil.tsx         → Tab "Perfil"
  producto/
    [id].tsx           → "/producto/:id" (ruta dinámica)

Layouts

Los archivos _layout.tsx envuelven las rutas hijo. Podés usar Stack, Tabs o cualquier navegador de React Navigation:

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="inicio" options={{ title: 'Inicio' }} />
      <Tabs.Screen name="perfil" options={{ title: 'Perfil' }} />
    </Tabs>
  );
}

Navegación programática

import { router } from 'expo-router';

// Navegar
router.push('/perfil');
// Con parámetros
router.push({ pathname: '/producto/[id]', params: { id: '123' } });
// Volver
router.back();

Deep Linking automático

Una de las grandes ventajas: Expo Router configura automáticamente el deep linking. Cada ruta de tu app es accesible desde una URL, lo que habilita notificaciones push que abren pantallas específicas y links compartidos.

¿Querés migrar tu app a Expo Router? Deepyze puede ayudarte con la migración.