Observadores de suscripción - Router por Before Semicolon

Suscripción de API

Estas API notifican su código JavaScript cuando ocurren modificaciones de URL o eventos de navegación.

`onPage`

Se suscribe a un patrón de ruta específico. La devolución de llamada se activa cada vez que el estado coincidente cambia (por ejemplo, de activo a inactivo o cambian los parámetros).

typescript
function onPage(
    pattern: string,
    callback: (active: boolean, location: PageLocation) => void,
    exact: boolean = true,
    matchGroup?: string
): () => void

Devuelve una función de limpieza para cancelar la suscripción.
active: true si la ubicación actual coincide con el patrón.
location: Objeto que contiene pathname, query (parámetros de búsqueda), data (estado del historial) y params analizado.

Ejemplo

javascript
import { onPage } from '@beforesemicolon/router'

const unsubscribe = onPage('/users/:userId', (active, location) => {
    if (active) {
        console.log(`Now viewing user: ${location.params.userId}`)
        console.log('State payload:', location.data)
    } else {
        console.log('Navigated away from user profile')
    }
})

// Later: clean up listener
// unsubscribe();

Utilice exact = false para suscribirse a una ruta de diseño y sus descendientes:

javascript
onPage(
    '/docs',
    (active) => {
        docsShell.hidden = !active
    },
    false
)

`onPageChange`

Se suscribe a todas las transiciones de ubicación global. Se activa después de cualquier evento de navegación, independientemente de qué rutas estén activas.

typescript
type PageChangeCallback = (
    pathname: string,
    searchParams: Record<string, string>,
    pageData: Record<string, unknown>
) => void

function onPageChange(callback: PageChangeCallback): () => void

Devuelve una función de limpieza para cancelar la suscripción.

Ejemplo

javascript
import { onPageChange } from '@beforesemicolon/router'

onPageChange((pathname, query, state) => {
    // Send analytics view event
    trackPageView(pathname)
})

`isOnPage`

Ayuda para verificar si una ruta específica coincide con la ubicación actual del navegador.

typescript
function isOnPage(pathname: string, exact: boolean = true): boolean

exact: Si es false, se evalúa como true si la ubicación del navegador comienza con la ruta especificada (tratando las subrutas como coincidencias).

Ejemplos

javascript
// Browser is at: /todos/123?filter=all

isOnPage('/todos') // false (not exact)
isOnPage('/todos', false) // true  (subpath match)
isOnPage('/todos/123') // true  (exact path match)
isOnPage('/todos/123?filter=all') // true  (exact match including queries)

[!NOTE] Las coincidencias de consultas de búsqueda dentro de isOnPage dependen del orden. Los parámetros deben aparecer en el orden exacto especificado.

editar este documento