Type Route<RouteDefinition>.session
The router session object has utilities used for interacting with the browser's history.
tsx
type RouterSession = {
push(href: string, state?: any): boolean;
replace(href: string, state?: any): boolean;
block(blocker: Blocker): () => void;
getInitialRoute(): Route;
back(amount?: number): void;
forward(amount?: number): void;
reset(options: SessionConfig): void;
listen(
navigationHandler: (
nextRoute: Route,
previousRoute: Route | null
) => false | void
): () => void;
};
The listen function will create a new route change listener. Whenever the application route changes this function will be called with the next matching route. If the given url does not match any route in that router an object with a false value for the name property and an empty object for the params property will be provided.
Example
tsx
const { session } = createRouter({
home: defineRoute("/"),
post: defineRoute({ postId: param.path.string }, (p) => `/post/${p.postId}`),
});
// Creates a new listener
const removeListener = session.listen((nextRoute) => {
console.log(nextRoute);
// logs:
// { name: false, params: {} }
// or
// { name: "home", params: {} }
// or
// { name: "post", params: { postId: "abc" }}
// (where "abc" is whatever was matched from the url)
});
// Removes the listener
removeListener();