How can a Lightning component be aware of the navigation in a Lightning community?

Question

I want to build a component that can ideally live inside the Napili community template header.

This component has to trigger some code whenever there is a navigation occuring in the community.

I have not found how to do this myself, The system event : aura:locationChange does not seem to do what I want to do, And I have not found a way to listen on the force:navigateToURL and other such events from the aura/force framework.

If anyone has an idea I would take it :)

As of now I can see this working by listening on the "render" and "rerender" of my component and keeping a check to see if the URL of the page has changed. (There has to be a better way?)

I have also posted this on https://developer.salesforce.com/forums/ForumsMain?id=9060G000000MRKRQA4

Edit: This component is not responsible for firing the navigateToUrl or any other navigation event. I just need to be able to do some processing on every navigation in the community.

Answer 1

Update for others looking for a solution to this question :

You do not need popstate (or) hashchange, thanks to Etienne Rocheleau for figuring out this event:

There is a forceCommunity:routechange event that does the exact job of tracing the url changes:

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_forceCommunity_routeChange.htm

Note:

This is my armature attempt to capture changes in the URL let me know if this is not your intent for posting the question

Give this a try: I did not experiment too much with many browsers.

I looked around to see if there are any listeners to detect URL change.I stumbled across this post

https://stackoverflow.com/questions/1930927/how-can-i-detect-an-address-bar-change-with-javascript

Extending this concept

I looked into Locker service API to see if window.addEventListener method was supported by aura and looks like it is from here:

Note: Lockerservice supports HashchangeEvent and PopStateEvent, does not support onpopstate,onhashchange methods

http://documentation.auraframework.org/lockerApiTest/index.app?aura.mode=DEV

From here I tried to implement the same into a lightning environment to see if the location #change was comminicated to the helper component( luckily it did)

App:

<aura:application >
    <c:urlHashChangeEventcomp></c:urlHashChangeEventcomp>
</aura:application>

Comp:

I used a button to append #value to url.you can try by appending # value to the URL through redirect/location.href as I did and see if the addEventListener will pick up the change.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <ui:button label="AppendhashtoURL" press="{!c.detecturlchange}" />
</aura:component>

Controller:

    ({
    detecturlchange : function(component, event, helper) {
        window.location.href += "#mypara";
        location.reload();
        window.addEventListener("hashchange",helper.handleHashChange(location.hash));
    },

})

You can also detect the url change using popstate apparently( not tested as mentioned previously with other browsers except chrome v61). If you want to go this route:

({
    detecturlchange : function(component, event, helper) {
        window.location.href = '/myparam';
 window.addEventListener("popstate",helper.handleHashChange(location.hash));
    },

})

Helper;

 ({
    handleHashChange: function(hashval) {
    alert( 'I got called by # value change in the url'+hashval) ;      
    }
})

If you are using popstate update helper method signature accordingly.

Answer 2

It seems that either this was missed in the documentation or it was updated after asking this question, but I believe this even is exactly the response to the original problem:

https://developer.salesforce.com/docs/atlas.en-us.212.0.lightning.meta/lightning/ref_forceCommunity_routeChange.htm

It does not provide any context as to what kind of navigation was executed or what is the target of the navigation, but it provides the kind of trigger that was needed originally.