Skip to content

routeConfig

Global route configuration.
This object contains all global options for some behaviour of route and router instances

Basic example

ts
import{ routeConfig, createBrowserHistory }from"mobx-route";consthistory=createBrowserHistory()routeConfig.update({history,baseUrl:'/',mergeQuery:false,});routeConfig.get();

Fields

history

This is interfaceHistoryfrommobx-location-historypackage.
API is identical withhistoryNPM package

Example:

ts
import{createHashHistory,createBrowserHistory,createMemoryHistory,}from"mobx-location-history";routeConfig.update({history:createHashHistory(),history:createBrowserHistory(),history:createMemoryHistory(),})

TIP

Factory functions for this property is also can be exported frommobx-routepackage.

ts
import{createHashHistory,createBrowserHistory,createMemoryHistory,}from"mobx-route";routeConfig.update({history:createHashHistory(),history:createBrowserHistory(),history:createMemoryHistory(),})

queryParams

This is instance of theQueryParamsclass frommobx-location-historypackage
This class is also can be exported frommobx-routepackage.

baseUrl

Specifies the base URL for all routes. This is used as a prefix for every route path and helps in forming complete URLs relative to this base. It's particularly useful when your application is not hosted at the root of a domain and you need consistent URL structures.

mergeQuery

Unique mechanism for working with query parameters in the router. This mechanism combines the current query parameters with the new ones when switching between routes.

Iftrue- then when switching between routes, the query parameters will be merged. Iffalse- then when switching between routes, the query parameters will be rewritten.

Example:

mergeQuery: false

ts
routeConfig.update({mergeQuery:false,})constroute1=newRoute('/foo/bar/baz');constroute2=newRoute('/bebe');awaitroute1.open(null, { query: { a:1, b:2, c:3} });// location.search='?a=1&b=2&c=3'awaitroute2.open(null, { query: { c:4, d:4, e:5, f:6} });// location.search='?c=4&d=4&e=5&f=6'

mergeQuery: true

ts
routeConfig.update({mergeQuery:true,})constroute1=newRoute('/foo/bar/baz');constroute2=newRoute('/bebe');awaitroute1.open(null, { query: { a:1, b:2, c:3} });// location.search='?a=1&b=2&c=3'awaitroute2.open(null, { query: { c:4, d:4, e:5, f:6} });// location.search='?a=1&b=2&c=4&d=4&e=5&f=6'

Released under the MIT License.