Link
Anclas de enlace localizadas integradas con el router.
Las primitivas Link y NavLink extienden los enlaces de anclaje HTML estándar integrando locales de idioma, directorios base y navegación de rutas SPA.
Inicio Rápido
Crea enlaces de enrutamiento localizados y conscientes de SPA:
import { Link, NavLink } from 'boltdocs/primitives'
export default function SidebarNav() {
return (
<div className="flex flex-col gap-2">
{/* 1. Navegación localizada estándar */}
<Link href="/getting-started" className="text-primary-500 hover:underline">
Primeros Pasos
</Link>
{/* 2. NavLink con resaltado automático de estado activo */}
<NavLink
href="/api/config-reference"
className={({ isActive }) =>
`px-3 py-1 rounded text-sm ${isActive ? 'bg-primary-500 text-white' : 'text-muted hover:bg-soft'}`
}
>
Referencia de Configuración
</NavLink>
</div>
)
}
Mecanismos Internos
- Localización: Las cadenas
hrefdirectas (como/getting-started) se analizan y traducen automáticamente a través del hookuseLocalizedTo. Por ejemplo, en una página localizada en español,/getting-startedse transforma transparentemente a/es/getting-started. - Enrutamiento SPA: Los clics en enlaces internos interceptan la navegación predeterminada del navegador para realizar enrutamiento rápido del lado del cliente, previniendo recargas completas de página.
Props del Componente
Props de Link
Hereda todos los atributos estándar del elemento HTML anchor (<a>):
| Propiedad | Tipo | Predeterminado | Descripción |
|---|---|---|---|
href | string | undefined | Ruta de destino de la ruta (por ejemplo, /docs/getting-started). |
prefetch | 'hover' | 'none' | 'hover' | Estrategia de precarga para objetivos de enlaces del router. |
Props de NavLink
Extiende las propiedades estándar de Link:
| Propiedad | Tipo | Predeterminado | Descripción |
|---|---|---|---|
href | string | undefined | Ruta de destino. |
end | boolean | false | Si se establece en true, el enlace solo se resalta como activo cuando las rutas coinciden exactamente. |
className | string | ((props: { isActive: boolean }) => string) | undefined | Nombre de clase de estilo, soportando funciones de lógica condicional. |
children | ReactNode | ((props: { isActive: boolean }) => ReactNode) | undefined | Nodos hijos, soportando funciones de renderizado condicional. |
Personalización y estados
Link es neutral en estilos — renderiza un <a> estándar con enrutamiento localizado, precarga y navegación SPA, pero sin visuales. Sus propiedades data-* pasan directamente al ancla. NavLink agrega la coincidencia de rutas: cuando la ruta actual coincide con href, el enlace se considera activo y recibes ese estado a través de las funciones de renderizado de className / children (se agrega una clase active simple cuando pasas un className como cadena).
| Estado / Slot | Mecanismo |
|---|---|
className de NavLink (función) | Recibe { isActive } — devuelve las clases para los estados activo / inactivo |
children de NavLink (función) | Recibe { isActive } para contenido condicional |
Clase active | Se agrega a NavLink cuando la ruta actual coincide (cuando className es una cadena) |
Propiedad end | true coincide solo con la ruta exacta; false (predeterminado) coincide con cualquier ruta que comience con ella |
Atributos data-* | Pasan desde las props al elemento <a> |
ref | Se reenvía al ancla renderizada |
Tailwind v4:
<NavLink
href="/docs/guides"
className={({ isActive }) =>
`px-3 py-1 rounded text-sm ${
isActive ? 'bg-primary-500/10 text-primary-400' : 'text-muted hover:bg-soft'
}`
}
>
Guías
</NavLink>
O CSS puro:
a.active {
color: var(--color-primary-400);
background: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
}
