Crelte Docs

Appearance

crelte / routing / Route

Class: Route ​

A Route contains information about the current page for example the url, the site and its entry.

Extends ​

Constructors ​

Constructor ​

ts
new Route(
   url, 
   site, 
   entry, 
   template, 
   loadedData, 
   opts?): Route;

Create a new Route

Note ​

This should only be created by crelte

Parameters ​

url ​

string | URL

site ​

Site

entry ​

Entry

template ​

TemplateModule

loadedData ​

Record<string, any>

opts? ​

RouteOptions = {}

Returns ​

Route

Overrides ​

BaseRoute.constructor

Properties ​

entry ​

ts
entry: Entry;

The entry of the route

entryChanged ​

ts
entryChanged: boolean;

Wether the entry changed since the last Route change

index ​

ts
index: number;

the position in the browser history of this route this allows to find out if we can go back

Inherited from ​

BaseRoute.index

loadedData ​

ts
loadedData: Record<string, any>;

The loaded data of the route

origin ​

ts
origin: RouteOrigin;

The origin of this route, See RouteOrigin

Inherited from ​

BaseRoute.origin

scrollY ​

ts
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

Inherited from ​

BaseRoute.scrollY

site ​

ts
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

Inherited from ​

BaseRoute.site

template ​

ts
template: TemplateModule;

The template module of the route

url ​

ts
url: URL;

The url of the route

Inherited from ​

BaseRoute.url

Accessors ​

baseUrl ​

Get Signature ​

ts
get baseUrl(): string;

Returns the base url of the route

Never ends with a slash

Example ​

js
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

Inherited from ​

BaseRoute.baseUrl

hash ​

Get Signature ​

ts
get hash(): string;

Returns the hash of the route

Example ​

js
const route = new Route('https://example.com/foo/bar/#hash', null);
console.log(route.hash); // '#hash'
Returns ​

string

Set Signature ​

ts
set hash(hash): void;

Set the hash of the route

Example ​

js
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

Inherited from ​

BaseRoute.hash

Get Signature ​

ts
get search(): URLSearchParams;

Returns the search params

Note ​

You might also have a look at getSearchParam and setSearchParam

Example ​

js
const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
console.log(route.search.get('a')); // '1'
Returns ​

URLSearchParams

Inherited from ​

BaseRoute.search

uri ​

Get Signature ​

ts
get uri(): string;

Returns the uri of the route

Never ends with a slash

Example ​

js
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

Inherited from ​

BaseRoute.uri

Methods ​

canGoBack() ​

ts
canGoBack(): boolean;

Checks if there are previous routes which would allow it to go back

Returns ​

boolean

Inherited from ​

BaseRoute.canGoBack

clone() ​

ts
clone(): Route;

Create a copy of the EntryRoute

Note ​

This does not make a copy of the entry, template or loadedData.

Returns ​

Route

Overrides ​

BaseRoute.clone

eq() ​

ts
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

Inherited from ​

BaseRoute.eq

eqHash() ​

ts
eqHash(route): boolean | null;

Checks if the hash is equal to another route

Parameters ​

route ​

BaseRoute | null

Returns ​

boolean | null

Inherited from ​

BaseRoute.eqHash

eqSearch() ​

ts
eqSearch(route): boolean | null;

Checks if the search params are equal to another route

Parameters ​

route ​

BaseRoute | null

Returns ​

boolean | null

Inherited from ​

BaseRoute.eqSearch

eqUrl() ​

ts
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

Inherited from ​

BaseRoute.eqUrl

getContext() ​

ts
getContext<T>(key): T | null;

Returns a context value if it exists.

Type Parameters ​

T ​

T = any

Parameters ​

key ​

string

Returns ​

T | null

Inherited from ​

BaseRoute.getContext

getSearchParam() ​

ts
getSearchParam(key): string | null;

Gets the search param

Example ​

js
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

Inherited from ​

BaseRoute.getSearchParam

getSiteToken() ​

ts
getSiteToken(): string | null;

Returns the site preview token, or null if it is missing or empty.

Returns ​

string | null

Inherited from ​

BaseRoute.getSiteToken

getState() ​

ts
getState<T>(key): T | null;

Returns a state value if it exists.

Type Parameters ​

T ​

T = any

Parameters ​

key ​

string

Returns ​

T | null

Inherited from ​

BaseRoute.getState

inLivePreview() ​

ts
inLivePreview(): boolean;

Returns true if the route is in live preview mode

Returns ​

boolean

Inherited from ​

BaseRoute.inLivePreview

setContext() ​

ts
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

Inherited from ​

BaseRoute.setContext

setSearchParam() ​

ts
setSearchParam(key, value?): void;

Sets the search param or removes it if the value is null, undefined or an empty string

Example ​

js
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

Inherited from ​

BaseRoute.setSearchParam

setState() ​

ts
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

Inherited from ​

BaseRoute.setState

siteMatches() ​

ts
siteMatches(): boolean;

Returns if the site matches the url

Returns ​

boolean

Inherited from ​

BaseRoute.siteMatches