Navigate between routes with application logic

Routes allow navigation in an application, but sometimes, an application must move between pages using logic instead of links. This document explains how to use application logic to navigate between routes.

Copy link to this section

Global redirect

The Global Redirect action enables navigation between pages. Unlike most actions, it does not restrict usage to a single component type. It works anywhere, including effectTriggers, epics, and custom component dispatches.

To define a Global Redirect, construct the action object directly. Its payload follows UiSdlGlobalRedirectPayload. The example below demonstrates a working implementation:

{
  "type": "GLOBAL_REDIRECT",
  "payload": {
    "url": "home",
    "replace": false,
    "back": false,
    "params": {}
  }
}

Dispatching this action takes the user to the home page. The action does not replace the current route in history or allow navigation back. Since home does not require page parameters, the params field remains empty.

To navigate to a page with parameters, replace the parameters directly in the URL:

{
  "type": "GLOBAL_REDIRECT",
  "payload": {
    "url": "turbines/WindTurbine1",
    "replace": false,
    "back": false,
    "params": {}
  }
}

This action redirects the user to the turbines page while focusing on WindTurbine1.

Alternatively, use the params mapping to define parameters separately while keeping them as variables in the URL:

{
  "type": "GLOBAL_REDIRECT",
  "payload": {
    "url": "turbines/{{turbineId}}",
    "replace": false,
    "back": false,
    "params": {
      "turbineId": "WindTurbine1"
    }
  }
}

This approach achieves the same result as the previous example, directing the user to turbines/WindTurbine1.