crelte / routing / BaseRoute
Class: BaseRoute
A Route contains information about the current page for example the url and the site
Extended by
Constructors
Constructor
new BaseRoute(
url,
site,
opts?): BaseRoute;Creates a new Route
Parameters
url
string | URL
site
opts?
BaseRouteOptions = {}
Returns
BaseRoute
Properties
index
index: number;the position in the browser history of this route this allows to find out if we can go back
origin
origin: RouteOrigin;The origin of this route, See RouteOrigin
scrollY
scrollY: number | null;The scroll position of the current route
Note
This does not have to represent the current scroll position should more be used internally.
It might be useful for a new request to specify the wanted scroll position
site
site: Site;The Site of the route
Note
In the beforeRequest event the site might not match the url and could be the default site or one that matches the users language.
If that is important call route.siteMatches() to verify
url
url: URL;The url of the route
Accessors
baseUrl
Get Signature
get baseUrl(): string;Returns the base url of the route
Never ends with a slash
Example
const site = _; // site with url https://example.com/foo
const route = new Route('https://example.com/foo/bar/', null);
console.log(route.baseUrl); // 'https://example.com/foo'
const site2 = _; // site with url https://example.com/other
const route2 = new Route('https://example.com/foo/bar/', site2);
console.log(route2.baseUrl); // 'https://example.com'Returns
string
hash
Get Signature
get hash(): string;Returns the hash of the route
Example
const route = new Route('https://example.com/foo/bar/#hash', null);
console.log(route.hash); // '#hash'Returns
string
Set Signature
set hash(hash): void;Set the hash of the route
Example
const route = new Route('https://example.com/foo/bar/', null);
route.hash = '#hash';
console.log(route.url.href); // 'https://example.com/foo/bar/#hash'Parameters
hash
string
Returns
void
search
Get Signature
get search(): URLSearchParams;Returns the search params
Note
You might also have a look at getSearchParam and setSearchParam
Example
const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
console.log(route.search.get('a')); // '1'Returns
URLSearchParams
uri
Get Signature
get uri(): string;Returns the uri of the route
Never ends with a slash
Example
const site = _; // site with url https://example.com/fo
const route = new Route('https://example.com/foo/bar/', site);
console.log(route.uri); // '/bar'
const site2 = _; // site with url https://example.com/other
const route2 = new Route('https://example.com/foo/bar/?a=1', site2);
console.log(route2.uri); // '/foo/bar'Returns
string
Methods
canGoBack()
canGoBack(): boolean;Checks if there are previous routes which would allow it to go back
Returns
boolean
clone()
clone(): BaseRoute;Create a copy of the Route
Note
This does not make a copy of the template or context
Returns
BaseRoute
eq()
eq(route): boolean | null;Checks if the route is equal to another route
This checks the url but search params do not have to be in the same order
Note
This only check the url, not site or anything else.
Parameters
route
BaseRoute | null
Returns
boolean | null
eqHash()
eqHash(route): boolean | null;Checks if the hash is equal to another route
Parameters
route
BaseRoute | null
Returns
boolean | null
eqSearch()
eqSearch(route): boolean | null;Checks if the search params are equal to another route
Parameters
route
BaseRoute | null
Returns
boolean | null
eqUrl()
eqUrl(route): boolean | null;Checks if the route is equal to another route
This does not check the search params or hash
Parameters
route
BaseRoute | null
Returns
boolean | null
getContext()
getContext<T>(key): T | null;Returns a context value if it exists.
Type Parameters
T
T = any
Parameters
key
string
Returns
T | null
getSearchParam()
getSearchParam(key): string | null;Gets the search param
Example
const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
console.log(route.getSearchParam('a')); // '1'Parameters
key
string
Returns
string | null
getSiteToken()
getSiteToken(): string | null;Returns the site preview token, or null if it is missing or empty.
Returns
string | null
getState()
getState<T>(key): T | null;Returns a state value if it exists.
Type Parameters
T
T = any
Parameters
key
string
Returns
T | null
inLivePreview()
inLivePreview(): boolean;Returns true if the route is in live preview mode
Returns
boolean
setContext()
setContext<T>(key, value): void;Sets a context value. If the value is null or undefined, the key will be removed.
When to use context
Context is used to pass data to onRoute and onRequest handlers or exchange data between loadData calls. This context is not persistent and should be considered valid only for the current request/route. The context is not cloned in the clone call and will be the same object.
Type Parameters
T
T
Parameters
key
string
value
T | null | undefined
Returns
void
setSearchParam()
setSearchParam(key, value?): void;Sets the search param or removes it if the value is null, undefined or an empty string
Example
const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
route.setSearchParam('a', '3');
console.log(route.url.href); // 'https://example.com/foo/bar/?a=3&b=2'
route.setSearchParam('a', null);
console.log(route.url.href); // 'https://example.com/foo/bar/?b=2'Parameters
key
string
value?
string | number | null
Returns
void
setState()
setState<T>(key, value): void;Sets a state value. If the value is null or undefined, the key will be removed.
When to use state
State is used to store additional information that persists across route changes. The State is only available in the client code since it is stored using window.history.
Consider using setSearchParam instead to enable server side rendering.
Type Parameters
T
T
Parameters
key
string
value
T | null | undefined
Returns
void
siteMatches()
siteMatches(): boolean;Returns if the site matches the url
Returns
boolean