Enrutamiento

El enrutamiento en PreffX está impulsado por una señal url de nivel raíz. La navegación la actualiza y el árbol renderizado reacciona automáticamente. La biblioteca es agnóstica respecto a la fuente de navegación: funciona con la Navigation API del navegador cuando está disponible y recurre a una navegación desconectada, gestionada por señales, en entornos SSR o sin interfaz (headless).

Leer la URL

La utilidad url es una señal URL de solo lectura:

import type { PC } from 'preffx';

export const Path: PC = (_props, { url }) => {
    return <p>You are at: {url.value.pathname}</p>;
};

Activar la navegación

Utilice navigate para moverse a otra URL:

import type { PC } from 'preffx';

export const Go: PC = (_props, { navigate }) => {
    return <button onClick={() => navigate('/about')}>About</button>;
};

Rutas declarativas con routes

La utilidad routes toma un mapa de patrón de ruta → componente y devuelve una señal reactiva que contiene el contenido renderizado para la primera ruta que coincide. La coincidencia es "primera coincidencia ganadora": los patrones se comprueban en el orden de las claves del objeto.

import type { PC } from 'preffx';

export const App: PC = (_props, { routes }) => {
    const content = routes({
        '/': () => <div>Home</div>,
        '/:lang?/user/:id': (_, { routeParams }) => (
            <div>User #{routeParams.id} ({routeParams.lang || 'en'})</div>
        ),
        '*': () => <div>Not found</div>
    });

    return (
        <div>
            <a href="/">Home</a>
            <a href="/user/42">User page</a>
            <a href="/ru/user/42">User page (ru)</a>
            <a href="/unknown">Unknown page</a>
            {content}
        </div>
    );
};

Patrones de ruta

Patrón	Descripción	Ejemplo de coincidencia
/users	Segmento estático	/users
/user/:id	Parámetro obligatorio (:id)	/user/42 → { id: '42' }
/:lang?/home	Parámetro opcional (?); vacío si está ausente	/home → { lang: '' }
/files/*	Splat — captura el resto (desde el * final)	/files/a/b → { '*': 'a/b' }
*	Catch-all — coincide con cualquier ruta	/anything

Notas:

• Los parámetros de ruta se decodifican automáticamente desde el URI.
• Un patrón coincide con un prefijo de la ruta: /users también coincide con /users/42. Utilice un catch-all o un patrón más específico cuando necesite una coincidencia exacta.
• * actúa como comodín solo como último segmento; en cualquier otro lugar se trata como un literal.
• Los parámetros de ruta coincidentes están disponibles a través de routeParams.
• En un diseño anidado, los patrones relativos se resuelven respecto a la ruta coincidente del padre.

Rutas anidadas

Llame a routes() en un componente padre; el componente hijo coincidente se renderiza en la señal devuelta. Los parámetros de ruta del patrón coincidente se exponen mediante routeParams y también están disponibles para los descendientes a través del contexto.

Resumen de utilidades

Opción	Tipo	Descripción
defaultURL	string | URL	URL inicial (para SSR, pase la URL de la solicitud)
url	ReadonlySignal<URL>	URL actual, reactiva
navigate	(url, options?)	Navegar a una URL
routes	(paths) => signal	Renderizado de primera coincidencia
routeParams	Record<string, string>	Parámetros de la ruta coincidente actual