Use it

// Set the reference to your routing store before any usage
// You ony need to this once in your application
setRoutingStore(routingStore)

const routes = {
search: '/search',
citySearch: '/cities/:city'
}

class DemoSearchStore {
city = computedRouteParam('city', {
patterns: [routes.citySearch],
})

// this one will come from the query string
checkIn = computedRouteParam('checkIn', {
// Define the route patterns for which this one is valid
patterns: [routes.search, routes.citySearch],

// Set a parsing fn to transform from string
parse: _parseDate,

// Set a formatting fn to transform into string
format: _formatDate,

// It'll return the default value in case it's
// not present on the route or with an empty value
defaultValue: 'temecula'
})

checkOut = computedRouteParam('checkOut', {
patterns: [routes.search, routes.citySearch],
parse: _parseDate,
format: _formatDate,
})

setCity = (city: Maybe) => {
// For updating the current route, push() and replace() methods are available:
// - push: will add the new url to the browsing history
// - replace: will replace the current url on the browsing history
this.city.push(city, {
// enforce a route pattern if needed, otherwise, it will use the
// current location (if matches the config) or first pattern available
pattern: !city && routes.search,

// cleanup all other params (default: false)
cleanParams: true,

// OR cleanup only selected params
cleanParams: [
this.checkIn,
this.checkOut
]
})
}

setPeriod = (checkIn: Maybe, checkOut: Maybe) => {
this.checkIn.push(checkIn)
this.checkOut.replace(checkOut)
}