Hooks

Hooks offer a way to register callbacks on router lifecycle events.

onAfterRouteEnter: (to, context) => {
   ...
}

Lifecycle

Before Hooks

• onBeforeRouteEnter: Triggered before a route gets mounted.
• onBeforeRouteUpdate: Triggered before a route changes. Specifically when the route changed but that parent or child didn’t.
• onBeforeRouteLeave: Triggered before a route is about to be unmounted

After Hooks

• onAfterRouteLeave: Triggered after a route gets unmounted.
• onAfterRouteUpdate: Triggered after a route changes. Specifically when the route changed but that parent or child didn’t.
• onAfterRouteEnter: Triggered after a route is mounted

Context

The router provides to and a context argument to your hook callback. The context will always include

Property	Intent
from	What was the route prior to the hook's execution
push	Convenient way to move the user from wherever they were to a new route
replace	Same as push, but with options: { replace: true }
reject	Trigger a rejection for the router to handle

If the hooks lifecycle is a before hook, you'll also have access to the following property in your context

Property	Intent
abort	Stops the router from continuing with route change

Levels

Hooks can be registered globally, on your route, or from within a component. This is useful for both providing the most convenient dx, but also can be a useful tool for ensuring proper execution order of your business logic.

Execution Order

1. Global hooks
2. Route hooks
3. Component Hooks

Global

router.onAfterRouteEnter((to, context) => {
  ...
})

Route

const routes = createRoutes([
  {
    name: 'Home',
    path: '/',
    onAfterRouteEnter: (to, context) => {
      ...
    }
  }
])

Component

In order to register a hook from within a component, you must use the composition API.

import { onBeforeRouteLeave } from '@kitbag/router'

onAfterRouteEnter((to, context) => {
  ...
})

WARNING

You cannot register onBeforeRouteEnter from within a component, since the component must have been mounted to discover the hook.