Navigation

To handle navigation in a Lightning Web Runtime (LWR) app, use the lwr/navigation module instead. For more information, see Client-Side Routing in LWR on Node.js.

CurrentPageReference gets a reference to the current page in Salesforce. Page URL formats can change in future releases. To future proof your apps, use page references instead of URLs. Use the page reference to create a deep link to the page. NavigationMixin gets a reference to the navigation service. Use the navigation service to navigate to another page in the application and generate a URL for a page.

Get a reference to the current page in Salesforce. Page URL formats can change in future releases. To future proof your apps, use page references instead of URLs. Use the page reference to create a deep link to the page.

The key-value pairs of the PageReference state property are serialized to URL query parameters. To create a deep link that describes the page and that a user can bookmark, update the state property. See Add Query Parameters.

Apply the NavigationMixin to the component's base class to gain access to its APIs.

The NavigationMixin adds two APIs to your component's class. Invoking these functions before the element is connected to the DOM can have unexpected results.

• [NavigationMixin.Navigate](pageReference, [replace]) - A component calls this API to navigate to another page in the application.
• [NavigationMixin.GenerateUrl](pageReference) - A component calls this API to get a promise that resolves to the resulting URL. The component can use the URL in the href attribute of an anchor. It can also use the URL to open a new window using the window.open(url) browser API.

This example shows how to invoke these API methods from this:

We recommend that you use lightning/navigation instead of window.location to navigate to a page from a Lightning web component. Using window.location can cause unexpected behavior in different browsers, different containers such as Lightning Experience and Experience Builder sites, or when you use an iframe. Manipulating the URL directly using window.location can also expose you to potential security vulnerabilities.

To navigate to a non-Salesforce web page, use the standard__webPage type.

To navigate to a Salesforce record page, use the standard__recordPage type. For more information, see PageReference Types.

The LWC Recipes GitHub repository contains code examples for Lightning Web Components that you can test in an org.

For a recipe that uses lightning/navigation, see the c-nav-to-* components in the LWC Recipes repo.

Navigate to Pages