How to get URL Parameters in Aura Component?
When working with Salesforce Communities or Lightning components, a common requirement is to read query string parameters from the URL and display them directly in the component. Initially, many developers use JavaScript to parse URL parameters and pass them into component attributes, but Salesforce introduced a more declarative way from the Summer ’18 release (API version 43 and later).
The recommended approach is to implement the lightning:isUrlAddressable interface. This interface makes the component URL-addressable and gives access to the pageReference attribute, which contains information about the URL, including query string parameters.
Here is an example. Suppose you have the following URL:
https://<instance>.lightning.force.com/lightning/cmp/<namespace>__componentName?testAttribute=abc
You can fetch the testAttribute parameter in your Aura component like this:
<aura:component implements="lightning:isUrlAddressable">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" description="Handler for initialization"/>
<aura:attribute name="pageReference" type="Object"/>
<aura:attribute name="testAttribute" type="String"/>
<!-- Display the parameter -->
URL Parameter Value: {!v.testAttribute}
</aura:component>
Code Explanation: In this Aura component, we first implement lightning:isUrlAddressable so that the component can read parameters from the URL. We use the aura:handler with the init event to call the controller method when the component loads. The pageReference attribute holds the entire URL context, including query parameters. We create another attribute called testAttribute that will store the extracted value. Finally, we display {!v.testAttribute} on the UI to show the parameter value directly.
In the JavaScript controller, you can initialize the attribute value by reading from the pageReference object:
When you load this component using the given URL, the output will show:
({
doInit : function(component, event, helper) {
// Access the state object from pageReference
let state = component.get("v.pageReference").state;
// Get the testAttribute parameter from URL
let paramValue = state.testAttribute;
// Set it into component attribute
component.set("v.testAttribute", paramValue);
// Log it to console
console.log("URL Parameter Value:", paramValue);
}
})
Code Explanation: The doInit function runs when the component initializes. We first access the state property from the pageReference object, which contains all query parameters. Then we retrieve the specific parameter testAttribute from the state. Using component.set, we assign this value to our component attribute testAttribute. Finally, we log the parameter value to the browser console to verify it was fetched successfully.
When you load this component using the given URL, the output will show:
URL Parameter Value: abc
And in the console, you will see the log:
URL Parameter Value: abc
This is the standard and supported way to access URL parameters in Aura components without writing custom JavaScript to parse the URL manually.
Before this feature was available, developers had to rely on JavaScript inside helper or controller files to manually fetch window.location.search and extract query parameters. That method still works, but it is not as clean or maintainable as using the lightning:isUrlAddressable interface.
In summary, for newer orgs (API v43 and above), the best practice is to use pageReference with lightning:isUrlAddressable. For older versions or special cases, JavaScript parsing of window.location can still be used, but it is no longer recommended.
Kick Start Your Journey with Real-Time Project-Based Salesforce Learning
Our Salesforce course is designed to provide you with a comprehensive understanding of the Salesforce platform, empowering you with the essential skills to thrive in the CRM industry. The course covers key topics such as Salesforce Admin, Developer, and AI, seamlessly integrating theory with practical application. By engaging in hands-on projects and assignments, you’ll develop the expertise to solve real-world business challenges using Salesforce solutions. Our expert trainers ensure you gain the technical knowledge and industry insights needed to excel in the Salesforce ecosystem.
In addition to technical skills, our Salesforce Training in Minneapolis offers personalized mentorship, certification guidance, and interview coaching to support your career growth. You’ll have access to a wide range of study materials, live projects, and dedicated support throughout the course. By the time you complete the program, you will be well-prepared for certification exams and equipped with the problem-solving skills that employers value. Start your Salesforce career today and unlock a world of opportunities. Sign up for a free demo now!
