LWC get url parameters in Community

Question

I'm trying to retrieve url parameters through a lightning web component in my Community.

For exemple : wwww.my-community.com/my-page?test=true

How can I, in the new LWC framework, get the parameter "test" and it's value ?

Thanks for your answers ;)

Answer 1

If the question was if the LWC Framework provide an utility - then no not that i am aware of.

Which means you can use every js snippet you will find somewhere in the web like

    parameters = {};

    connectedCallback() {

        this.parameters = this.getQueryParameters();
        console.log(this.parameters);
    }

    getQueryParameters() {

        var params = {};
        var search = location.search.substring(1);

        if (search) {
            params = JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g, '":"') + '"}', (key, value) => {
                return key === "" ? value : decodeURIComponent(value)
            });
        }

        return params;
    }

That will return you an key/value pair of your parameters for further usage in your component

Answer 2

Another approach with using URL.searchParams:

The searchParams readonly property of the URL interface returns a URLSearchParams object allowing access to the GET decoded query arguments contained in the URL.

connectedCallback() {
    const param = 'test';
    const paramValue = this.getUrlParamValue(window.location.href, param);
}

getUrlParamValue(url, key) {
    return new URL(url).searchParams.get(key);
}

Answer 3

The best way to get params from URL is use CurrentPageRefference.

currentPageReference.state allows you to get params.

    import { LightningElement, wire } from 'lwc';
    import { CurrentPageReference } from 'lightning/navigation';
    
    export default class Test extends LightningElement {

        currentPageReference = null; 
        urlStateParameters = null;
    
        urlId = null;
        urlLanguage = null;
        urlType = null;

        @wire(CurrentPageReference)
        getStateParameters(currentPageReference) {
           if (currentPageReference) {
              this.urlStateParameters = currentPageReference.state;
              this.setParametersBasedOnUrl();
           }
        }

        setParametersBasedOnUrl() {
           this.urlId = this.urlStateParameters.id || null;
           this.urlLanguage = this.urlStateParameters.lang || null;
           this.urlType = this.urlStateParameters.type || '10';
        }
    }

More details you can find here https://beyondthecloud.dev/blog/get-url-parameters-in-lwc