VirtualRoute

Class for creating routes with custom activation logic. Useful for implementing:

• Modal windows routing
• Feature toggles
• Conditional UI states
• Non-URL-based routing scenarios

Unlike standardRoute, doesn't depend on URL path. Activation state is determined by custom logic.

Constructor

newVirtualRoute(config?:VirtualRouteConfiguration<TParams>)

Configuration options:

• initialParams: initial params for this route
• checkOpened: Function/value determining if route is open
• open: Custom open handler
• close: Custom close handler
• queryParams: Custom query params implementation

Example:

constageModalRoute=newVirtualRoute<{age:number}>({initialParams: { age:0},checkOpened: (route)=>!!route.query.showAgeModal,open: (params,route)=>route.query.update({...params,showAgeModal:'true'}),close: (route)=>route.query.update({showAgeModal:undefined})});

Methods and properties

isOpened: booleancomputed

Indicates whether route is active. Automatically updates when dependencies change.

Example:

constroute=newVirtualRoute({checkOpened: ()=>Math.random()>0.5});autorun(()=>{console.log('Route state:', route.isOpened);// Randomly changes});

params: TParamsobservable

Current virtual route parameters. Type is determined by generic type parameter.
Example:

constroute=newVirtualRoute<{userId:string}>();route.open({ userId:'123'});route.params?.userId;// '123'

query: IQueryParams

Interface for managing query parameters frommobx-location-historypackage.
Automatically synchronized with current url.

open(params?, extraParams?: { query?, replace? }): Promise<void>action

Activates the route with execution flow:

1. Updates params/query
2. Uses customopenhandler if provided for changeisOpenedor setsisOpened`true

close(): voidaction

Deactivates the route. Behavior depends on configuration:

1. Uses custom close handler if provided
2. Default behavior sets isOpened to false

setOpenChecker(openChecker): voidaction

Updates theopenCheckervalue with the provided one.
openCheckeris a function or a boolean value that determines whether the route is open or not.

Configuration

Interface:VirtualRouteConfiguration

This is specific object used to detailed configure virtual route.
Here is list of configuration properties which can be helpful:

abortSignal

AbortSignalused to destroy\cleanup route subscriptions

meta

Additional object which can contains meta information

constroute=createVirtualRoute({meta: {memes:true}});console.log(route.meta?.memes);// true

open()

Custom implementation of open behaviour for this route.
It can be helpful if you need custom open/close behaviour

Will be used default implementation if is not specified:

defaultOpenImplementation=()=>true;

Examples:

constroute=newVirtualRoute({checkOpened: ()=>!!queryParams.data.yummiesDialog,open: ()=>{queryParams.update({ yummiesDialog:true});returntrue}})

close()

Custom implementation of close behaviour for this route
It can be helpful if you need custom open/close behaviour

Will be used default implementation if is not specified:

defaultCloseImplementation=()=>false;

Examples:

constroute=newVirtualRoute({checkOpened: ()=>!!queryParams.data.yummiesDialog,close: ()=>{queryParams.update({ yummiesDialog:false});returnfalse}})

checkOpened()

Custom implementation of close/open statement for this route
It can be helpful if you need custom open/close behaviour

Examples:

constroute=newVirtualRoute({checkOpened: ()=>!!queryParams.data.yummiesDialog,})

beforeOpen

Event handler "before opening" a route, required for various checks before the route itself is opened.
With this handler, we can prevent the route from opening by returningfalse,
or override the navigation to another one by returning

{url: string;state?:any;replace?:boolean;}

Example:

constroute=newVirtualRoute('/foo/bar', {beforeOpen: ()=>{if(!auth.isAuth) {returnfalse;}}})

afterClose()

Calls after close route.

afterOpen()

Calls after open route.