routeConfig
Global route configuration.
This object contains all global options for some behaviour of route and router instances
Basic example
import{ routeConfig, createBrowserHistory }from"mobx-route";consthistory=createBrowserHistory()routeConfig.update({history,baseUrl:'/',mergeQuery:false,});routeConfig.get();
Fields
history
This is interfaceHistory
frommobx-location-history
package.
API is identical withhistory
NPM package
Example:
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-route
package.
import{createHashHistory,createBrowserHistory,createMemoryHistory,}from"mobx-route";routeConfig.update({history:createHashHistory(),history:createBrowserHistory(),history:createMemoryHistory(),})
queryParams
This is instance of theQueryParams
class frommobx-location-history
package
This class is also can be exported frommobx-route
package.
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
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
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'