How To Navigate From One Component To Other Component Using Dynamic Lightning Components

Step 1:Create a component 1

Using this component we can give FirstName and LastName . If we click on NavigateToC2 button it should navigate to Component 2 and display FullName.
Here is the Component 1.
<aura:component >
    <aura:attribute name="Result" type="String"/>
    <aura:registerEvent name="navigate" type="c:NavigateFromC1ToC2"/>
    <div class="demo-only" style="height: 640px;">
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <ui:inputText class="testDiv" aura:id="First" label="First Name      " required="true"/>
                    <ui:inputText class="testDiv" aura:id="Last" label="Last Name        " required="true"/>
                </div>
                <footer class="slds-modal__footer">
                    <button class="slds-button slds-button_neutral " onclick="{!c.destroyComponent}">Cancel</button>
                    <button class="slds-button slds-button_brand">Save</button>
                    <ui:button label="NavigateToC2" press="{!c.fullName}"/>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </div>
</aura:component>
Controller
({
    fullName : function(component, event, helper) {
        var a = component.find("First").get("v.value");
        var b = component.find("Last").get("v.value");
        var res = a +" "+b;
        res = res + '';
        var evt = $A.get("e.c:NavigateFromC1ToC2");
        evt.setParams({ "result": res});
        evt.fire();
    },
    destroyComponent: function(component, event, helper){
        component.destroy();
    }
})
Style
.THIS .testDiv {
    width :30%;
   
}
Step 2 : Create Events.

Create an Application Event to send data from one component to other component.Application events can talk to many components that can be interested by the event. 
<aura:event type="APPLICATION">
   <aura:attribute name="result" type="String"/>

</aura:event>

Step 3:Create Component 2

This component displays FullName. We can get this FullName from component 1. We can done this using Application event. 
Here is the Component 2.
<aura:component >
    <aura:attribute name="res" type="String" />
    <div class="demo-only" style="height: 640px;">
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    Full name is  <ui:outputText value="{!v.res}"/>
                </div>
                <footer class="slds-modal__footer">
                    <button class="slds-button slds-button_neutral" onclick="{!c.destroyComponent}">Cancel</button>
                    <button class="slds-button slds-button_brand">Save</button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </div>

</aura:component>
Controller
({
destroyComponent: function(component, event, helper){
        component.destroy();
       
    }
})
Step 4:Now , call these components dynamically from other component.

Component
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="c:NavigateFromC1ToC2" action="{!c.navigateToComponent}"/>
    {!v.body}
</aura:component>
Controller
({
    doInit : function(component, event, helper) {
        $A.createComponent(
            "c:c1",
            {
             
            },
            function(newCmp){
                if (component.isValid()) {
                    component.set("v.body", newCmp);
                }
            }
        );
    },
    navigateToComponent : function(component,event,helper) {
        $A.createComponent(
            "c:c2",
            {
                "res" : event.getParam("result")
            },
            function(newCmp){
                if (component.isValid()) {
                    component.set("v.body", newCmp);
                }
            }
        );
    }

})

Result :

This is component one . Enter values and click on NavigateToC2 Button.

Then we can get Component 2.