Skip to main content

Router service

Navigates between apps and views, and provides access to current route details.

Router service image

In-ports​

navigate Object — The destination route object.

Out-ports​

route Object — The current route object.

Overview​

The Router component is a wrapper for the Router system service. It enables you to switch to different app views or navigate to different apps and workspaces.

To use this service, pass an object with the destination route parameters to the navigate port. The service will redirect the user's browser to the specified destination.

Whenever the location URL of the browser is updated, such as when a page is loaded or a view is switched, the Router service emits an event on the route port. This event contains the current route details. Refer to the table below for a complete list of supported parameters.

Route object​

The route object defines the parameters that allow the Router service to navigate between different apps or views within an app. The combination of parameters depends on whether you are using an ID-based or alias-based URL (see the "Anatomy of Kelp URL" section below).

PropertyDescription
addressTypeSpecifies whether the URL is based on an ID (id) or an alias (alias).
addressSubTypeSpecifies whether the app is in the development or released stage. Only applicable to alias addresses.
workspaceThe unique identifier for the workspace. This can be either a workspace ID or a slug. Only applicable to alias addresses.
applicationThe unique identifier for the application.
viewThe name of the destination view. If the value is null, then the browser is redirected to the default view for the app.
paramsCustom query parameters to be included in the URL.

Anatomy of Kelp URL​

Kelp supports two types of app URLs: ID-based and alias-based.

ID-based URL​

An ID-based URL is canonical and includes a unique application ID across all Kelp apps. This ID is auto-generated when the app is created. The format of the URL is as follows:

/id/<app_id>/<view>[?param=value]

For example: /id/r_6MQTQf2VLXkw9XOucPLa40/index

Alias-based URL​

An alias-based URL includes the application name (alias) and workspace name instead of an application ID. You can assign the application name in the app's settings dialog. Note that the application name must be unique within your workspace. The format of the URL is as follows:

/<workspace>/<app_name>/<view>[?param=value]

For example: /templates/clock/index

Examples​

Empty route object will navigate to the default application view.

{}

Switch to a view​

This route object will switch to a different view within your app.

{
  "view": "index"
}

This route object navigates to another app in the same workspace using an ID-based URL to address the target app.

{
  "addressType": "id",
  "application": "r_6MQTQf2VLXkw9XOucPLa40",
  "view": "index"
}

The browser location will display:

/id/r_6MQTQf2VLXkw9XOucPLa40/index

This route object navigates to another app in a different workspace using an alias-based URL to address the target app.

{
  "addressType": "alias",
  "workspace": "templates",
  "application": "clock",
	"view": "index"
}

The resulting URL will be the following:

/tools/calculator/index

Route for ID**-based URL**​

Switching to this URL:

/id/r_6MQTQf2VLXkw9XOucPLa40/index?locale=en

Will emit the following route object on route port:

{
  "addressType": "id",
  "application": "r_6MQTQf2VLXkw9XOucPLa40",
  "view": "index",
  "params": {
		"locale": "en"
	}
}

Route for alias**-based URL**​

Switching to this URL:

/d/templates/clock/index?locale=en

Will emit the following route object on route port:

{
  "addressType": "alias",
  "addressSubType": "released",
  "workspace": "templates",
  "application": "clock",
  "view": "index",
  "params": {
		"locale": "en"
	}
}

Settings​

No additional configuration is required.

Redirect to URL