Mejores prácticas de los fundamentos de Expo Router
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
//
Busca en todas las páginas de la documentación
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
Scaffolding con Expo Router desde el principio: default@sdk-57 establece main: "expo-router/entry" - retroajustar file-based routing cuesta más que comenzar con app/.
Instala router a través de Expo: npx expo install expo-router fija versiones compatibles con los peers de React Navigation del SDK 57 - los rangos npm manuales causan desajustes entre native/JS.
Trata los nombres de archivo como URLs: app/settings.tsx → /settings - diseña rutas para deep links y analytics antes de que las carpetas proliferen.
Mantén los archivos de ruta delgados: Menos de ~20 líneas; re-exporta pantallas desde features/<name>/ - los revisores grepen app/ para entender la navegación, no las reglas de negocio.
Un único _layout.tsx raíz para providers: Theme, query client, sesión de auth y error boundaries montan una sola vez - nunca dupliques QueryClientProvider en tab layouts.
Los layouts anidados son propietarios solo de la interfaz: Headers de stack, iconos de tab, etiquetas de drawer - no data fetching. useFocusEffect refetch pertenece a las pantallas.
Usa route groups para estructura: (auth), (app), (tabs), (modals) - los paréntesis organizan sin contaminar las URLs.
Las carpetas privadas usan prefijo de subrayado: _components/ colocados con layouts no son enrutables - nunca crees pantallas accidentales /components.
Index routes para hubs de listas: orders/index.tsx lista; orders/[id].tsx detalles - las rutas predecibles de tipo REST ayudan con el enlace.
Un único hub de redirección en app/index.tsx: El enrutamiento de auth y rol vive en un solo lugar - evita archivos / index duplicados entre grupos.
Espera la hidratación de sesión antes de redirigir: Muestra splash o spinner mientras SecureStore lee - la <Redirect> prematura causa parpadeo de login/home.
router.replace después de login y logout: Preserva la higiene del back-stack - push deja pantallas de credenciales detrás del swipe-back.
Protege grupos autenticados en layout: (app)/_layout.tsx redirige invitados - deep links a /settings no deben eludir auth.
Prefiere Link para navegación declarativa: Listas, enlaces en línea y prefetch - reserva router.push para efectos secundarios post-async.
Centraliza constructores de href: orderDetailHref(id) en navigation/hrefs.ts - una corrección de typo actualiza cada callsite de feature.
Habilita rutas tipadas temprano: experiments: { typedRoutes: true } en app.config.ts - las rutas inválidas fallan en tsc, no en producción.
Valida parámetros con Zod en tiempo de ejecución: la entrada de useLocalSearchParams() no es confiable desde deep links y payloads de push - los tipos por sí solos son insuficientes.
Anida stacks dentro de tabs para drill-down: Una pestaña empuja pantallas de detalles mientras la barra de tabs permanece - limita el anidamiento a drawer → tabs → stack.
Oculta rutas no-tab con href: null: Las pantallas auxiliares permanecen navegables vía router.push sin saturar la barra de tabs.
Las rutas modales son explícitas: Grupo (modals) o presentation: "modal" - las semi-superposiciones rompen back y accesibilidad de Android.
Declara scheme antes de enviar deep links: El scheme app.config.ts y los dominios asociados se emparejan con rutas de archivo - prueba flujos Maestro por cada URL crítica.
Ejecuta tsc --noEmit cuando app/ cambia: .expo/types regenerados capturan hrefs obsoletos - añade a CI junto con expo-doctor.
Alinea app/ con feature slices: features/orders/ se asigna a app/(tabs)/orders/ - regla de importación: las rutas importan features, no al revés.
Documenta patrones no estándar en ADRs: Modales como superposiciones, barras de tabs personalizadas o escapes de React Navigation - antes de que el tercer squad los copie.
Revisita el mapa de rutas en ~30 pantallas: Aplana árboles profundos, divide modales y audita rutas duplicadas - programa antes de que ciclos de importación y rutas / duplicadas fuercen una reescritura.
En features/<name>/ - hooks, API y UI de pantalla. Los archivos app/ solo re-exportan. Los providers globales viven en root _layout.tsx o app-providers.tsx.
app/*.tsx a menos que sean guardias de redirección de auth.npx expo start --non-interactive &
npm run typecheckAsegúrate de que .expo/types se genere antes de tsc en CI cuando app/ cambia.
app/ - (auth) y carpetas privadasHref generadosVersiones 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).
Revisado por Chris St. John·Última actualización: 16 jul 2026