Tipificación de Navegación y Parámetros de Ruta

// app.json - habilita rutas tipificadas (beta en SDK 57)
{
  "expo": {
    "experiments": {
      "typedRoutes": true
    }
  }
}

// app/user/[id].tsx
import { Link, router, useLocalSearchParams, type Href } from "expo-router";
import { Text, View } from "react-native";
import { z } from "zod";
 
const Params = z.object({
  id: z.string().regex(/^\d+$/),
});
 
export default function UserScreen() {
  const raw = useLocalSearchParams<"/user/[id]">();
  const { id } = Params.parse(raw); // comprobación en tiempo de ejecución - params son cadenas
 
  return (
    <View>
      <Text>Usuario {id}</Text>
      <Link href={{ pathname: "/user/[id]", params: { id: "42" } }}>Usuario 42</Link>
    </View>
  );
}
 
// Navegación imperativa - Href captura errores tipográficos
export function openUser(userId: string) {
  const href = { pathname: "/user/[id]", params: { id: userId } } satisfies Href;
  router.push(href);
}

// app/places/[placeId].tsx
import { Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
import { z } from "zod";
 
const PathParams = z.object({
  placeId: z.string().uuid(),
});
 
const QueryParams = z.object({
  tab: z.enum(["overview", "photos"]).default("overview"),
  ref: z.string().optional(),
});
 
type PlaceDetail = { id: string; name: string; city: string };
 
async function fetchPlace(id: string): Promise<PlaceDetail> {
  // Reemplaza con tu cliente API
  return { id, name: "Mission Dolores Park", city: "San Francisco" };
}
 
export default function PlaceDetailScreen() {
  const raw = useLocalSearchParams<
    "/places/[placeId]",
    { tab?: string; ref?: string }
  >();
 
  const path = PathParams.safeParse(raw);
  const query = QueryParams.safeParse(raw);
 
  const [place, setPlace] = useState<PlaceDetail | null>(null);
  const [error, setError] = useState<string | null>(null);
 
  useEffect(() => {
    if (!path.success) {
      setError("ID de lugar inválido en la URL");
      return;
    }
    fetchPlace(path.data.placeId)
      .then(setPlace)
      .catch(() => setError("No se pudo cargar el lugar"));
  }, [path.success, path.success ? path.data.placeId : null]);
 
  if (!path.success || !query.success) {
    return (
      <View style={styles.center}>
        <Text style={styles.error}>Este enlace es inválido u obsoleto.</Text>
      </View>
    );
  }
 
  if (error) {
    return (
      <View style={styles.center}>
        <Text style={styles.error}>{error}</Text>
      </View>
    );
  }
 
  if (!place) {
    return (
      <View style={styles.center}>
        <ActivityIndicator />
      </View>
    );
  }
 
  const { tab, ref } = query.data;
 
  return (
    <View style={styles.container}>
      <Stack.Screen options={{ title: place.name }} />
      <Text style={styles.title}>{place.name}</Text>
      <Text style={styles.meta}>{place.city}</Text>
      <Text style={styles.meta}>
        Pestaña: {tab}
        {ref ? ` - ref=${ref}` : ""}
      </Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, gap: 8 },
  center: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24 },
  title: { fontSize: 22, fontWeight: "700" },
  meta: { fontSize: 15, color: "#64748b" },
  error: { color: "#dc2626", textAlign: "center" },
});

// app/places/index.tsx - enlaces tipificados a rutas dinámicas
import { Link, useRouter } from "expo-router";
import { FlatList, Pressable, StyleSheet, Text } from "react-native";
 
const PLACES = [
  { id: "550e8400-e29b-41d4-a716-446655440000", name: "Dolores Park" },
  { id: "6ba7b810-9dad-11d1-80b4-00c04fd430c8", name: "Golden Gate" },
] as const;
 
export default function PlacesIndex() {
  const router = useRouter();
 
  return (
    <FlatList
      data={PLACES}
      keyExtractor={(p) => p.id}
      contentContainerStyle={styles.list}
      renderItem={({ item }) => (
        <Pressable
          onPress={() =>
            router.push({
              pathname: "/places/[placeId]",
              params: { placeId: item.id, tab: "photos" },
            })
          }
        >
          <Text style={styles.row}>{item.name}</Text>
          <Link
            href={{
              pathname: "/places/[placeId]",
              params: { placeId: item.id, tab: "overview", ref: "list" },
            }}
            style={styles.link}
          >
            Abrir a través de Link
          </Link>
        </Pressable>
      )}
    />
  );
}
 
const styles = StyleSheet.create({
  list: { padding: 16, gap: 12 },
  row: { fontSize: 17, fontWeight: "600" },
  link: { color: "#2563eb", marginTop: 4 },
});

// app/search/[...terms].tsx - los segmentos catch-all son string[]
import { useGlobalSearchParams } from "expo-router";
import { Text, View } from "react-native";
import { z } from "zod";
 
const TermsParams = z.object({
  terms: z
    .union([z.string(), z.array(z.string())])
    .transform((v) => (Array.isArray(v) ? v : [v]))
    .pipe(z.array(z.string()).min(1)),
});
 
export default function SearchScreen() {
  const raw = useGlobalSearchParams<"/search/[...terms]">();
  const parsed = TermsParams.safeParse(raw);
 
  if (!parsed.success) {
    return <Text>Faltan términos de búsqueda</Text>;
  }
 
  return (
    <View>
      <Text>Buscando: {parsed.data.terms.join(" - ")}</Text>
    </View>
  );
}

import { type Href, useRouter, useSegments } from "expo-router";
 
// Navegación de perfil relativa a la pestaña sin cadenas Href relativas
function ProfileShortcut() {
  const [group] = useSegments();
  const router = useRouter();
  const href = `/${group}/profile` as Href; // convierte después de construir desde segmentos
  return null; // conecta a un Pressable en la interfaz de usuario real
}
 
// Navegación imperativa estrecha detrás de un auxiliar
function navToPlace(placeId: string, tab: "overview" | "photos" = "overview") {
  const router = useRouter();
  router.push({
    pathname: "/places/[placeId]",
    params: { placeId, tab },
  });
}