Skip to content

RouteMatch vs RouteMatch#$next

vilicvane edited this page May 19, 2020 · 1 revision

Boring Router is built around route states. When you create a route tree, it also creates observable route tree states.

Consider the example below:

const history = new BrowserHistory();

const router = new Router(history);

const route = router.$route({
  account: true,
  about: true,
  notFound: {
    $match: RouteMatch.rest,
  },
});

The states of account route (which is a RouteMatch object) can be accessed through route.account. E.g., state route.account.$matched tells whether route account is currently matched.

So what is $next? Boring Router supports hooks like $beforeEnter / $beforeUpdate. When a navigation is happening, a NextRouteMatch object similar to RouteMatch is provided. It contains the probable next states for the route.

This means, if your later operation, like a redirection requiring information from states that are not currently active (like during before enter), use $next. Otherwise you might miss what you need.

Clone this wiki locally