Rutas con tipos

// app.config.ts
export default {
  experiments: {
    typedRoutes: true,
  },
} satisfies import("expo/config").ExpoConfig;

# Regenera tipos después de añadir rutas
npx expo start
# o
npm run typecheck   # tsc --noEmit

import { Link, router, type Href } from "expo-router";
 
// ✅ Ruta estática - href de cadena
const settings: Href = "/settings";
 
// ✅ Ruta dinámica - objeto con parámetros
const order: Href = { pathname: "/orders/[id]", params: { id: "42" } };
 
<Link href={order}>Abre la orden</Link>
router.push(order);

// src/navigation/hrefs.ts
import type { Href } from "expo-router";
 
export const orderDetailHref = (id: string): Href => ({
  pathname: "/orders/[id]",
  params: { id },
});

// app.config.ts
import type { ExpoConfig, ConfigContext } from "expo/config";
 
export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: "TypedRoutesApp",
  slug: "typed-routes-app",
  experiments: {
    typedRoutes: true,
  },
});

app/
├── _layout.tsx
├── settings.tsx
└── orders/
    ├── index.tsx
    └── [id].tsx

// src/navigation/hrefs.ts
import type { Href } from "expo-router";
 
export const hrefs = {
  settings: "/settings" as Href,
  orders: "/orders" as Href,
  orderDetail: (id: string): Href => ({
    pathname: "/orders/[id]",
    params: { id },
  }),
} as const;

// features/orders/ui/OrdersListScreen.tsx
import { Link } from "expo-router";
import { Text, View } from "react-native";
import { hrefs } from "@/navigation/hrefs";
 
export function OrdersListScreen() {
  return (
    <View style={{ padding: 16 }}>
      <Link href={hrefs.orderDetail("99")}>
        <Text>Orden 99</Text>
      </Link>
    </View>
  );
}

// features/orders/ui/OrderDetailScreen.tsx
import { useLocalSearchParams } from "expo-router";
import { z } from "zod";
import { Text, View } from "react-native";
 
const paramsSchema = z.object({
  id: z.string().min(1),
});
 
export function OrderDetailScreen() {
  const raw = useLocalSearchParams();
  const parsed = paramsSchema.safeParse(raw);
 
  if (!parsed.success) {
    return (
      <View style={{ padding: 16 }}>
        <Text>Enlace de orden inválido</Text>
      </View>
    );
  }
 
  const { id } = parsed.data;
 
  return (
    <View style={{ padding: 16 }}>
      <Text>Orden {id}</Text>
    </View>
  );
}

// Ejemplos de fallo en tiempo de compilación (no se envíen):
// router.push("/orders");           // ❌ falta parámetros para ruta [id]
// router.push("/settigns");          // ❌ error de tipografía en ruta estática
// <Link href="/unknown" />          // ❌ la ruta no existe en app/

.expo/types/router.d.ts    # Generado automáticamente - no edites manualmente

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  },
  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts"]
}

import type { Href } from "expo-router";
 
function navigate(href: Href) {
  router.push(href);
}

app/users/[userId]/posts/[postId].tsx

const href: Href = {
  pathname: "/users/[userId]/posts/[postId]",
  params: { userId: "1", postId: "9" },
};

Tiempo de compilación (rutas con tipos):     Errores de tipografía de desarrollador en router.push / Link
Tiempo de ejecución (Zod):                 Deep links, notificaciones push, URLs mal formadas

npx expo customize tsconfig.json   # configuración inicial si es necesaria
npx expo start --non-interactive & # genera .expo/types
sleep 5
npm run typecheck