Svelte 46: Un Patrón de Router Ligero en el Cliente
easy⏱ 5 mincoursesvelte
Un store como única fuente de verdad para la navegación
Todo lo demás se deriva de una sola decisión: representar 'la pantalla actual' como el valor de un store en vez de esparcir banderas booleanas entre componentes. Cualquier componente puede leer $currentRoute para decidir qué mostrar, y cualquier componente puede llamar a navigate() para cambiarlo — no se requiere relación padre/hijo entre la navegación y el contenido que controla.
// router.js
export const currentRoute = writable('home');
export function navigate(route) {
currentRoute.set(route);
}
// App.svelte
{#if $currentRoute === 'home'}
<Home />
{:else if $currentRoute === 'about'}
<About />
{/if}
Este es el modelo mental real de SvelteKit, no un juguete
SvelteKit — el meta-framework oficial de Svelte — apila rutas basadas en archivos, funciones load, renderizado en el servidor y división de código sobre esta misma idea, nada de lo cual puede correr dentro de este sandbox de un solo archivo en el navegador (aquí no hay sistema de archivos, ni servidor, ni bundler). Pero conceptualmente, navegar en SvelteKit sigue reduciéndose a 'actualizar un estado que describe la ruta actual, y dejar que la UI reaccione' — acabas de construir a mano su núcleo reactivo.
Navega por la app
Haz clic en Home, About y Contact. Nota que el botón de navegación activo se restiliza según el MISMO valor $currentRoute que decide qué página se renderiza — un store, dos consumidores perfectamente de acuerdo.