Router

Class for centralized routing management.
Provides a common interface for working with history, location, and route collections.

Constructor

newRouter(config: RouterConfiguration)

Accepts configuration with route collection and routing settings.

Basic example

import{createBrowserHistory,QueryParams,Route,routeConfig,RouteGroup,Router,}from'mobx-route';consthistory=createBrowserHistory();constqueryParams=newQueryParams({ history });routeConfig.set({history,queryParams,baseUrl:'/base-url',});exportconstroutes={home:newRoute('/'),projects:newRouteGroup({index:newRoute('/projects', { index:true}),new:newRoute('/projects/new'),details:newRoute('/projects/:projectId'),}),};exportconstrouter=newRouter({routes,history,location,queryParams,});router.routes.home.open();router.navigate(router.router.home.createUrl());router.history.back();

Methods and properties

routes: TRoutesCollection

Root collection of application routes. Can contain nestedRouteGroups.

Example:

router.routes.home.open();router.routes.admin.routes.dashboard.isOpened;

history: AnyHistory

Interface for managing browser history frommobx-location-historypackage.
Handles navigation operations.

Example:

router.history.back();

location: AnyLocation

Reactive object with browser location frommobx-location-historypackage.

Example:

autorun(()=>{console.log('Current path:', router.location.pathname);});

query: IQueryParams

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

Example:

router.query.data;// { q: 'test' }router.query.update({ bar:1});router.query.data;// { q: 'test', bar: '1' }

navigate(url: string, options?): voidaction

Universal method for URL navigation.

Examples:

// Basic navigationrouter.navigate('/about');// With query parametersrouter.navigate('/search', {query: { q:'test'},replace:true});// Using generated URLconsturl=router.routes.profile.createUrl({ userId:42});router.navigate(url);