---
tags: brew-js
---

# Router events

### `navigate` event

Fired when the app is about to navigate to a new path.

app.on('navigate', (e) => {
   /* ... */ 
});

The event object has the interface:

{
    readonly pathname: string;
    readonly oldPathname: string;
    readonly oldStateId: string;
    readonly newStateId: string;
    readonly route: Readonly<RouteParam>;
    readonly data: any;
}

If `app.path` is updated in this event, the app will redirect to the new path, skipping the current one.

app.on('navigate', ({ oldPathname, pathname, route }) => {
   if (pathname !== '/my-page') {
       // both works the same
       app.path = '/page-not-found';
       app.navigate('/page-not-found');
   }
});

:::info
Note that `app.path` is not yet updated during `navigate` event.
:::

### `beforepageload` event

It is similar to `navigate` event but after `app.path` is updated.

Also it it possible to delay the completion of navigation process:

app.on('beforepageload', e => {
    e.waitFor(someAsyncOperation());
});

Similarly, any further navigation during this phase will cause the previous navigation to be cancelled.

The event object has the interface:

{
    readonly pathname: string;
    readonly data: any;
}