ui-router-server / location / installServerLocation

Variable: installServerLocation

const installServerLocation: <T>(router, options?) => T;

Defined in: location.ts:162

Installs `serverLocationPlugin` on router, points it at the requested url, and returns the same router.

It takes a router rather than constructing one: a server render drives whatever UIRouter its client uses — lit-ui-router's UIRouterLit included — and constructing one here pins that choice. Build the router yourself and hand it over; it comes back at the type it went in as.

The url is set before any transition runs, so the router's first sync (start() on a UIRouterLit, urlService.sync() on a core router) heads for the state the request asked for. Neither returns anything, and the transition settles asynchronously, resolves included: await it before reading the router. transitionService.onSuccess fires when it lands; stateService.go() returns the transition promise where those do not.

Type Parameters

Type Parameter	Description
T extends UIRouter	the router type, returned unchanged

Parameters

Parameter	Type	Description
router	T	a freshly constructed router, with no location plugin yet
options?	ServerLocationOptions	the request's url, the mount's shape, the url shape, and the url config

Returns

T

router, for chaining

Throws

if urlConfig is given and a state with a url, or a when() url rule, is already registered; the router is left unchanged

Example

import { servicesPlugin, UIRouter, type StateDeclaration } from '@uirouter/core';
import { installServerLocation } from 'ui-router-server/location';

declare const request: Request;
declare const states: StateDeclaration[];

const { pathname, search } = new URL(request.url);
const router = new UIRouter();
router.plugin(servicesPlugin);
installServerLocation(router, {
  url: pathname + search,
  urlConfig: { strict: false },
});
// core stamps each registered declaration with $$state, so register a copy per router
states.forEach((state) => router.stateRegistry.register({ ...state }));
const settled = new Promise<void>((resolve) => {
  router.transitionService.onSuccess({}, () => resolve());
});
router.urlService.sync();
await settled;