Page Reference Types in LWC

Page Reference Types play a key role when it comes to navigating the users from one LWC to a different destination or from one Aura Component to a different destination.

In this blog post let's look at how to send the user from one LWC to a different destination with the help of Page Reference Types.

The syntax that's associated with Page Reference Types is simple and straight forward, however, the key part is the config object that we pass to the Navigate method in NavigationMixin

Before we use NavigationMixin we need to import it first and then we need to wrap the LightningElement class that our LWC component extends.

Here is the skeleton that shows how to import NavigationMixin and wrap LightningElement within NavigationMixin.

import { LightningElement } from "lwc";

import { NavigationMixin } from "lightning/navigation";

export default class ExploreNavigation extends NavigationMixin(
  LightningElement
) {

}

Regarding the syntax that we use to send the user to a different destination, it's something like this.

const config = {}
this[NavigationMixin.Navigate](config);

What goes into config is the key. The content of the object changes from one destination to another destination.

As an example, if I were to send the user from LWC to an Aura Component then I need to use the following config object.

{
    type: 'standard__component',
    attributes: {
        componentName: 'c__ExploreAuraHelloWorldComponent'
    },
    state: {
        c__message: 'HEY!!! SALESFORCE CASTS'
    }
}

Here are the list of destinations that we can send the user to from a Lightning Web Component.

• App
• Knowledge Article
• Lightning Component
• Login Page
• Managed Content Page (Salesforce CMS)
• Named Page (Experience Builder sites)
• Named Page (Standard)
• Navigation Item Page
• Object Page
• Record Page
• Record Relationship Page
• Web Page

Check out each destination to understand how the code has to be to navigate the user to destination.

Hope this helps!