Error while navigating between components

Question

A component 1 redirect me to a component 2 and I'd like that in component 2, when I click on a return button, I'm redirected to component 1.

For navigate from component 2 to component 1, I use an event.

Component 2 :

<aura:registerEvent name="displayList" type="c.B_NavigateToList" />    
<button class="slds-button" onclick="{!c.goBack}">
    <lightning:icon iconName="action:back" size="small" class="icon" variant="bare"/>
</button>

The controller JS of component 2:

goBack : function(component, event, helper){
    console.log("retour vers la liste");
    var evt = $A.get("e.c:B_NavigateToList");
    evt.fire();
}

The event B_NavigateToList is a simple event with no parameter.

The main component, that display components 1 or 2, capturing the event :

<aura:handler event="c:B_NavigateToList" action="{!c.doInit}"/>

{!v.body}

Ant its controller method doInit :

doInit : function(component, event, helper) {
    $A.createComponent(
        "c:B_ContactComponent",
        {

        },
        function(newCmp){
            if (component.isValid()) {
                component.set("v.body", newCmp);
            }
        }
    );
},

So when I'm on the component 2 and I click on the return button, I got a javascript error :

rerender threw an error in 'markup://aura:expression' [Cannot read property 'childNodes' of null] Failing descriptor: {markup://aura:expression}

EDIT

I change the controller JS of component 2 like that :

goBack : function(component, event, helper){
    console.log("retour vers la liste");
    var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
        componentDef : "c:B_ContactComponent",
    });
    evt.fire();
}

And now when I click the return button I don't get any error but nothing happen and I stay on component 2 instead of being redirected to component 1 (named "B_ContactComponent" ).

Answer 1

EDIT

Well I tried it in many ways, I ended up with an undefined event in the controller. It's still in beta...

So I went for the proven way, following this guide.

The idea is that your main component has a {!v.body}, and registers to events handling the navigation. B_NavigateToList event of type Application for example.

<aura:handler event="c:B_NavigateToList" action="{!c.navigateToListAction}"/>

In the main component controller, you should implement this function

navigateToListAction: function(component,event,helper) {
  $A.createComponent(
     "c:B_ContactComponent",
     {
       "res" : event.getParam("result")
     },
     function(newCmp){
        if (component.isValid()) {
            component.set("v.body", newCmp);
        }
     }
  );
}

In your Component 2, consider implementing this function in the controller

goBack: function(component, event, helper) {
    var evt = $A.get("e.c:B_ContactComponent");
    evt.fire();
},

When the user clicks on the goBack in the component B, it fires the event B_NavigateToList, which will be caught by the main component. And rerender the body.

Hope this helps

---

Old solution not working (yet):

Why not use the (new/beta) feature force:navigateToComponent ?

Little example :

goBack: function(component, event, helper) {
    var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
        componentDef : "c:Component1"
    });
    evt.fire();
}

It requires that the component is marked with access="global" or a component within the current namespace. And as it is a standard event of Lightning, it doesn't require the extras from using a custom event (no event creation, no handler, etc.).

Source

But a raised question yesterday explained that this feature also overwrites the whole page (the lightning component is treated as the unique component to show). So if you use your lightning component in a page containing already other components, it's maybe not what you're looking for