Link & href

Navegación declarativa y enlaces que favorecen la precarga. Link se asigna a navegación similar a anclas en la web y objetivos de presión accesibles en nativo - router maneja flujos imperativos después de efectos secundarios.

Receta

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

import { Link, router, type Href } from "expo-router";
import { Pressable, Text, View } from "react-native";
 
// Href de string - solo rutas estáticas
<Link href="/settings">Settings</Link>
 
// Href de objeto - segmentos dinámicos (preferido)
<Link href={{ pathname: "/orders/[id]", params: { id: "42" } }}>
  Order 42
</Link>
 
// Imperativo después de mutación
router.replace("/(tabs)");
 
// Precarga en hover/focus (web) o manualmente
<Link href="/orders" prefetch />

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

Cuándo usarlo:

• Link - filas de lista, enlaces de texto en línea, navegación adyacente a pestañas, anclas web amigables con SEO
• router.push - navega después de enviar formulario, escanear código QR o devolución de llamada de temporizador
• router.replace - post-inicio de sesión, post-cierre de sesión, finalización de incorporación
• prefetch - pantallas con bundles pesados o cascadas de datos lentas

Ejemplo funcional

Pantalla de lista con Link, Pressable personalizado mediante asChild, navegación imperativa y constructores de href centralizados.

// src/navigation/routes.ts
import type { Href } from "expo-router";
 
export function orderDetailHref(id: string): Href {
  return { pathname: "/orders/[id]", params: { id } };
}
 
export function settingsHref(): Href {
  return "/settings";
}

// features/orders/ui/OrdersListScreen.tsx
import { Link, router } from "expo-router";
import { Pressable, Text, View } from "react-native";
import { orderDetailHref } from "@/navigation/routes";
 
const ORDERS = [
  { id: "101", label: "Widget shipment" },
  { id: "102", label: "Replacement part" },
];
 
export function OrdersListScreen() {
  return (
    <View style={{ flex: 1, padding: 16, gap: 12 }}>
      {ORDERS.map((order) => (
        <Link key={order.id} href={orderDetailHref(order.id)} prefetch asChild>
          <Pressable style={{ padding: 12, backgroundColor: "#f1f5f9", borderRadius: 8 }}>
            <Text>{order.label}</Text>
          </Pressable>
        </Link>
      ))}
 
      <Link href="/settings">Account settings</Link>
 
      <Pressable
        onPress={() => router.push(orderDetailHref("draft"))}
        accessibilityRole="button"
      >
        <Text>Create draft (imperative)</Text>
      </Pressable>
    </View>
  );
}

// Después de enviar formulario exitoso - replace evita la pila de vuelta al formulario
import { router } from "expo-router";
 
async function onSubmit() {
  await saveProfile();
  router.replace("/(tabs)/profile");
}

// Descartar flujo modal
import { router } from "expo-router";
 
function closeModal() {
  if (router.canGoBack()) {
    router.back();
  } else {
    router.replace("/");
  }
}

Análisis profundo

Formas de href

// Navegación relativa dentro de app/orders/
<Link href="./[id]" params={{ id: "5" }}>Relative</Link>

• Los parámetros siempre son strings cuando se analizan desde URLs - coerciona números en la pantalla
• Parámetros de consulta - href="/search?q=shoes" o params: { q: "shoes" } dependiendo de la forma de ruta
• Habilita rutas tipificadas para que valores pathname inválidos fallen en tiempo de compilación - ver Typed Routes

Link vs router

// Props de Link que importan en producción
<Link
  href="/orders"
  prefetch                    // precargar módulo de ruta
  replace                     // reemplazar historial en lugar de hacer push
  push                        // forzar push incluso cuando replace podría ser predeterminado
  asChild                     // fusionar en Pressable hijo
  disabled={!isReady}
/>

Comportamiento de precarga

• prefetch en Link - Expo Router carga el bundle de JavaScript de la ruta de destino por adelantado antes de la navegación
• Más impactante para pestañas perezosas y pantallas pesadas con grandes árboles de dependencias
• En web, precarga puede enganchar focus/hover dependiendo de la versión - verifica en tu SDK de destino
• No precargues rutas protegidas por autenticación antes de que se conozca la sesión - ancho de banda desperdiciado y parpadeo

Patrón asChild

<Link href="/settings" asChild>
  <Pressable style={styles.row}>
    <Text>Settings</Text>
  </Pressable>
</Link>

• El hijo debe enviar props (onPress, href en web) - usa Pressable o componentes personalizados que propagan props
• Evita anidar botones dentro de botones - un Pressable por Link
• Establece accessibilityRole="link" en web; Pressable hereda comportamiento de link de Link

Constructores de href centralizados

// packages/navigation/src/hrefs.ts (monorepo)
export const orderDetailHref = (id: string) =>
  ({ pathname: "/orders/[id]", params: { id } }) as const;

• Un módulo previene derivas de tipografía en features
• Apps white-label comparten packages/navigation cuando las formas de ruta coinciden
• Empareja con Zod validando params en la entrada de pantalla - los constructores de href no validan entrada en tiempo de ejecución

Errores comunes

• Concatenación de strings para rutas dinámicas - href={'/orders/' + id} elude rutas tipificadas y se rompe cuando los segmentos cambian. Solución: Forma de objeto o orderDetailHref(id).

• router.push después de inicio de sesión - el gesto de vuelta regresa al inicio de sesión. Solución: router.replace.

• Link envolviendo componentes sin envío de props - filas personalizadas ignoran presión. Solución: asChild + propagar props, o usar Pressable.

• URLs externas en router.push - puede que no abra navegador. Solución: import { openURL } from "expo-linking" para enlaces https://.

• Precargando rutas protegidas - parpadea contenido no autorizado. Solución: Gatea precarga detrás de verificación de sesión u omite en pantallas de autenticación.

• Falta de accessibilityRole en Pressable imperativo - los lectores de pantalla anuncian "botón" para navegación. Solución: accessibilityRole="link" o prefiere Link.

• Enormes cargas de parámetros en href - inflación de estado de navegación, registros filtran datos. Solución: Pasa solo IDs; carga cuerpos desde almacén o API.

Alternativas

Preguntas frecuentes

router.push({ pathname: "/search", params: { q: "shoes", sort: "price" } });

<Link href="/checkout" disabled={!cartReady} asChild>
  <Pressable disabled={!cartReady}>
    <Text>Checkout</Text>
  </Pressable>
</Link>

import * as Linking from "expo-linking";
 
await Linking.openURL("https://docs.expo.dev/router/introduction/");

Relacionado

• Typed Routes - seguridad de Href en tiempo de compilación
• Redirects & Index Routes - Redirect vs router.replace
• Stack Navigation - comportamiento de pila de vuelta
• Expo Router Basics - diseño de archivo de ruta
• ../expo-rules/navigation-and-routing-rules/navigation-and-routing-rules.md - reglas de Link vs imperativa
• ../architecture-design/adr-navigation-library-choice/adr-navigation-library-choice.md - justificación de deep linking

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).