Route Aliases

Note: Spartacus 4.x is no longer maintained. Please upgrade to the latest version.

Note: Spartacus 4.x was tested with SAP Commerce Cloud versions 1905 to 2205. Spartacus 4.x has not been verified to work with (and is not guaranteed to work with) SAP Commerce Cloud 2211 or later releases.

Multiple route aliases can be configured in the paths array. Spartacus then generates router links using the first configured alias that can satisfy the parameters of the paths array with the params object. As a result, you need to order aliases from those that require the most specific parameters to those having the least parameters.

In the following example, the configuration has the route aliases in the correct order:

ConfigModule.withConfig({
    routing: {
        routes: {
            product: {
                paths: [
                    ':campaignName/p/:productCode', /* this will be used when the `campaignName` parameter is provided */
                    'p/:productCode' /* this will be used otherwise */
                ]
            }
        }
    }
})

The following is an example where the campaignName parameter is provided:

<a [routerLink]="{ cxRoute: 'product', params: { productCode: 1234, campaignName: 'sale' } } | cxUrl"></a>

The result is the following configured router link:

<a [routerLink]="['/', 'sale', 'p', '1234']"></a>

The following is an example where the campaignName parameter is not provided:

<a [routerLink]="{ cxRoute: 'product', params: { productCode: 1234 } } | cxUrl"></a>

The result is the following configured router link:

<a [routerLink]="['/', 'p', '1234']"></a>

Wrong Order of Aliases

When a path with less parameters, such as /p/:productCode, is listed in the configuration before a path that has the same number of parameters and more, such as :campaignName/p/:productCode, then the first alias will always be used to generate the path, and the second alias will never be used.

In the following example, the configuration has the route aliases in the wrong order:

ConfigModule.withConfig({
    routing: {
        routes: {
            product: {
                paths: [
                    /* WRONG: */

                    /* will always be used */
                    'p/:productCode', 

                    /* will never be used, because (among others) it contains the same parameters as above */
                    ':campaignName/p/:productCode'
                ]
            }
        }
    }
})

The following is an example where the campaignName parameter is provided:

<a [routerLink]="{ cxRoute: 'product', params: { productCode: 1234, campaignName: 'sale' } } | cxUrl"></a>

The following is an example where the campaignName parameter is not provided:

 <a [routerLink]="{ cxRoute: 'product', params: { productCode: 1234 } } | cxUrl"></a>

In both cases, the resulting configured router link is the same, and the campaignName parameter is not included:

<a [routerLink]="['/', 'p', '1234']"></a>