Observateurs d'abonnement - Router par Before Semicolon

API d'abonnement

Ces API notifient votre code JavaScript lorsque des modifications d'URL ou des événements de navigation se produisent.

`onPage`

S'abonne à un modèle de route spécifique. Le rappel se déclenche chaque fois que l'état correspondant passe (par exemple, actif à inactif ou les paramètres changent).

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

Renvoie une fonction de nettoyage pour se désabonner.
active : true si l'emplacement actuel correspond au modèle.
location : Objet contenant pathname, query (paramètres de recherche), data (état de l'historique) et params analysé.

Exemple

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();

Utilisez exact = false pour vous abonner à un chemin de mise en page et à ses descendants :

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

`onPageChange`

Abonne à toutes les transitions de localisation mondiales. Déclenché après tout événement de navigation, quels que soient les chemins actifs.

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

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

Renvoie une fonction de nettoyage pour se désabonner.

Exemple

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

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

`isOnPage`

Aide pour vérifier si un chemin spécifique correspond à l'emplacement actuel du navigateur.

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

exact : Si false, est évalué à true si l'emplacement du navigateur commence par le chemin spécifié (en traitant les sous-chemins comme des correspondances).

Exemples

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] Les correspondances de requête de recherche dans isOnPage sont sensibles à l’ordre. Les paramètres doivent apparaître dans l'ordre exact spécifié.

modifier ce document