---
# System prepended metadata

title: Router events
tags: [brew-js]

---

---
tags: brew-js
---

# Router events

### `navigate` event

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

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

The event object has the interface:

```typescript
{
    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.

```typescript
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:

```typescript!
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:

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