Observadores por inscrição - Router da Before Semicolon

APIs de inscrição

Estas APIs notificam seu código JavaScript quando ocorrem alterações na URL ou eventos de navegação.

`onPage`

Inscreve-se em um padrão de rota específico. A função de retorno é acionada sempre que o estado correspondente muda, por exemplo, de ativo para inativo ou quando os parâmetros são alterados.

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

Retorna uma função de limpeza para cancelar a inscrição.
active: true se a localização atual corresponder ao padrão.
location: objeto com pathname, query (parâmetros de consulta), data (estado do histórico) e params analisados.

Exemplo

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

Use exact = false para observar um caminho de layout e seus descendentes:

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

`onPageChange`

Inscreve-se em todas as transições globais de localização. É acionado depois de qualquer evento de navegação, independentemente dos caminhos ativos.

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

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

Retorna uma função de limpeza para cancelar a inscrição.

Exemplo

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

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

`isOnPage`

Auxiliar que verifica se um caminho específico corresponde à localização atual do navegador.

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

exact: se false, retorna true quando a localização do navegador começa com o caminho informado, tratando subcaminhos como correspondências.

Exemplos

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] A correspondência de parâmetros de consulta em isOnPage considera a ordem. Os parâmetros devem aparecer exatamente na ordem informada.

editar este documento