Skip to main content

Redirect Component

The Redirect Component is a utility component in the CargoXplorer TMS System that enables automatic navigation to specified paths with optional parameters. This component is particularly useful for creating landing pages, handling conditional routing, and implementing navigation flows without user interaction.

YAML Structure​

The Redirect Component is defined using YAML within the App Modules. Below is the standard structure for configuring a Redirect Component:

component: redirect
props:
  path: "/dashboard"
  params:
    dashboard_id: 1234
  delay: 0

Attribute Description​

Props​

  • path (string, required):

    The URL path to redirect to. By default, paths are within the current organization context.

    • Organization paths: Start with / (e.g., "/dashboard", "/orders/list")
    • System paths: Start with ~ (e.g., "/org/select", "/login")

  • params (object, optional):

    Key-value pairs representing query parameters to be passed to the target path. These parameters will be encoded and appended to the URL as query strings.

    Example:

    params:
      dashboard_id: 1234
      view_mode: "detailed"

  • delay (number, optional):

    The delay in milliseconds before the redirect occurs. Default is 0 (immediate redirect). Useful for displaying loading messages or completing animations before navigation.

  • replace (boolean, optional):

    When set to true, replaces the current history entry instead of pushing a new one. Default is false.

  • condition (object, optional):

    Conditional logic to determine whether the redirect should occur. Supports expressions and variable references.

Examples​

Organization Redirect​

A redirect within the current organization to the dashboard path with a specific dashboard ID.

component: redirect
props:
  path: "/dashboard"
  params:
    dashboard_id: 1234

System Redirect​

A redirect to a system-level route outside the organization context.

component: redirect
props:
  path: "~/org/select"