Crelte Docs

Appearance

crelte / routing / Router

Class: Router ​

The Crelte Router

Constructors ​

Constructor ​

ts
new Router(inner): Router;

Parameters ​

inner ​

any

Returns ​

Router

Accessors ​

entry ​

Get Signature ​

ts
get entry(): Readable<Entry | null>;

returns a store with the current entry

Note ​

Will always contain an entry except in the first loadData call this is intentional since you might get the wrong entry if a request is happening and you call this in loadData. If possible use the CrelteRequest provided in each loadData call.

Returns ​

Readable<Entry | null>

loading ​

Get Signature ​

ts
get loading(): Readable<boolean>;

returns a store which indicates if the a page is loading

Returns ​

Readable<boolean>

loadingProgress ​

Get Signature ​

ts
get loadingProgress(): Readable<number>;

returns a store which indicates the loading progress between 0 and 1

Returns ​

Readable<number>

preferredLanguages ​

Get Signature ​

ts
get preferredLanguages(): string[];

The languages which the user prefers

This comes from Accept-Language header or the navigator.languages

Returns ​

string[]

req ​

Get Signature ​

ts
get req(): Request | null;

returns the latest request in progress otherwise returns null.

Important !! ​

If at all possible prefer using the CrelteRequest provided in each loadData call. For example in a preload request this will return null. Or a user has clicked multiple times on different links you might get the url of the newer request.

Returns ​

Request | null

route ​

Get Signature ​

ts
get route(): Readable<Route | null>;

returns a store with the current route

Note ​

Will always contain a route except in the first loadData call this is intentional since you will get the wrong route in a loadData call. In a loadData you should always use the CrelteRequest provided in each loadData call.

Returns ​

Readable<Route | null>

site ​

Get Signature ​

ts
get site(): Readable<Site | null>;

returns a store with the current site

Note ​

Will always contain a site except in the first loadData call this is intentional since you might get the wrong site if a site switch is happening and you call this in loadData. If possible use the CrelteRequest#site provided in each loadData call.

Else use router.site.get() ?? router.req.site

Returns ​

Readable<Site | null>

sites ​

Get Signature ​

ts
get sites(): Site[];

The sites which are available

Returns ​

Site[]

Methods ​

back() ​

ts
back(): void;

Go back in the history

On the server this throw an error

Returns ​

void

canGoBack() ​

ts
canGoBack(): boolean;

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

On the server this will always return false

Returns ​

boolean

onRequest() ​

ts
onRequest(fn): () => void;

Add a listener for the onRequest event

This will trigger every time a new route is requested

Parameters ​

fn ​

(req) => void

Returns ​

a function to remove the listener

ts
(): void;
Returns ​

void

onRoute() ​

ts
onRoute(fn): () => void;

Add a listener for the onRoute event

This will trigger every time a new route is set and is equivalent to router.route.subscribe(fn) except that it will not trigger instantly

Parameters ​

fn ​

(route) => void

Returns ​

a function to remove the listener

ts
(): void;
Returns ​

void

open() ​

ts
open(target, opts): Promise<void | Route>;

Open a new route

Parameters ​

target ​

the target to open can be an url, a route or a request the url needs to start with http or with a / which will be considered as the site baseUrl

Note ​

The origin will always be set to 'manual'

Example ​

js
import { getRouter } from 'crelte';

const router = getRouter();
console.log(router.site.get().url.href); // 'https://example.com/de';

router.open('/foo/bar');
// the following page will be opened https://example.com/de/foo/bar

string | URL | Route | Request | UpdateRequest

opts ​

RequestOptions = {}

Returns ​

Promise<void | Route>

preferredSite() ​

ts
preferredSite(): Site | null;

Returns a site which is preferred based on the users language

Returns null if no site could be determined

Returns ​

Site | null

preload() ​

ts
preload(target): void;

Preload a url

Parameters ​

target ​

string | URL | Route

Returns ​

void

primarySite() ​

ts
primarySite(): Site;

Returns the primary site

Returns ​

Site

push() ​

ts
push(route, opts): Promise<void | Route>;

This pushes the new route without triggering a new pageload

You can use this when using pagination for example change the route object (search argument) and then call push

Note ​

This will always set the origin to 'push' And will clear the scrollY value if you dont provide a new one via the opts This will disableLoadData by default if you dont provide an override via the opts

Example using the update function ​

js
import { getRouter } from 'crelte';

const router = getRouter();

const page = 1;
router.push(req => req.setSearchParam('page', page || null));

Example using the route object ​

js
import { getRouter } from 'crelte';

const router = getRouter();

const page = 1;
const route = router.route.get();
route.setSearchParam('page', page > 0 ? page : null);
router.push(route);

Parameters ​

route ​

Route | Request | UpdateRequest

opts ​

RequestOptions = {}

Returns ​

Promise<void | Route>

pushState() ​

ts
pushState(route): void;

Parameters ​

route ​

Route | Request

Returns ​

void

Deprecated ​

use push instead

replace() ​

ts
replace(route, opts): Promise<void | Route>;

This replaces the state of the route without triggering a new pageload

You can use this when using some filters for example a search filter

Note ​

This will always set the origin to 'replace' And will clear the scrollY value if you don't provide a new one via the opts This will disableLoadData by default if you don't provide an override via the opts

Example using the update function ​

js
import { getRouter } from 'crelte';

const router = getRouter();

const search = 'foo';
router.replace(req => req.setSearchParam('search', search));

Example using the route object ​

js
import { getRouter } from 'crelte';

const router = getRouter();

const search = 'foo';
const route = router.route.get();
route.setSearchParam('search', search);
router.replace(route);

Parameters ​

route ​

Route | Request | UpdateRequest

opts ​

RequestOptions = {}

Returns ​

Promise<void | Route>

replaceState() ​

ts
replaceState(route): void;

Parameters ​

route ​

Route | Request

Returns ​

void

Deprecated ​

use replace instead

targetToRequest() ​

ts
targetToRequest(target, opts): Request;

Resolve a url or Route and convert it to a Request

Parameters ​

target ​

string | URL | Route | Request

opts ​

RequestOptions = {}

any option present will override the value in target

Returns ​

Request

Returns null if the url does not match our host (the protocol get's ignored)