Add Query Parameters

To add query parameters to the URL, update the PageReference.state property. The navigation service uses a PageReference to generate a URL. The key-value pairs of the state property are serialized to URL query parameters. The query parameters describe the page and form a more specific URL that the user can save or bookmark.

Keep these behaviors in mind when working with the state property.

  • The PageReference object is frozen, so you can’t change it directly. To navigate to the same page with a modified state, copy the current PageReference and modify the copy using Object.assign({}, pageReference).
  • state properties must use a namespace prefix followed by two underscores, __. If the component isn’t part of a managed package, use c for the namespace prefix. If the component is part of a managed package, use the package's namespace.
  • Since the key-value pairs of PageReference.state are serialized to URL query parameters, all the values must be strings.
  • Code that consumes a value from state must parse the value into its proper format.
  • To delete a value from the state object, set it as undefined.
  • Even when using HTTPS, including personal data for URL parameters isn’t safe. See Storing Sensitive Data for details.
  • In Lightning Experience and Experience Builder sites that are built with Aura or LWR templates, the view isn’t rerendered when only the URL query string changes. To react to a change in the URL query string, we recommend that components observe the CurrentPageReference object and compare against the page reference's state.

The component in this example has a link labeled Show Panel that changes to Hide Panel when clicked. Clicking either link updates the current page's state. When the page state changes, the this.currentPageReference property, decorated with @wire(CurrentPageReference), updates. The component rerenders to show or hide the panel and update the link label.