How to make navigation to Lightning component using isUrlAddressible?

Question

So, I had a problem with navigating from Parent component to Child component, but it was solved. But now I have even more strange problem.

So, I did navigation from Parent component to the Child one, but I also need to make navigation from Child component to Baby component. I used exact same code for .js methods and same edits for components, but still, it doesn't work.

Parent component:

<aura:component implements="force:appHostable, lightning:isUrlAddressable" access="global">
<aura:attribute name="typename" type="string" required="true" default="test type" />
<aura:attribute name="pageReference" type="object" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:navigation aura:id="navService"/>
<div style="align-content: center">
    <div class="c-container slds-theme_default custom-container">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem padding="around-small" size="12">
                <div class="page-section page-header slds-align_absolute-center">
                    <h1>
                        New Work Type
                    </h1>
                </div>
            </lightning:layoutItem>
            <div style="align-content: center;">
                <lightning:layoutItem padding="around-small" size="12">
                    <lightning:layout>
                        <lightning:layoutItem padding="around-small" size="4">
                            <div class="page-section page-main custom-form">
                                <div class="custom-input">
                                    <lightning:input aura:id="typename" value="{!v.typename}" label="Work Type Name" required="true" />
                                    <lightning:button variant="brand" class="slds-float_right" label="Next" onclick="{!c.navigateToMyComponent}" />
                                </div>
                            </div>
                        </lightning:layoutItem>
                    </lightning:layout>
                </lightning:layoutItem>
            </div>
        </lightning:layout>
    </div>
</div>

Parent component controller:

({
doInit: function (component, event, helper) {
    var pageReference = {
        type: 'standard__controller',
        attributes: {
            componentName: 'c__CarServiceComponent2'
        },
            state: {
                "c__requiredFor": "{!v.typename}"
            }
    };
    component.set("v.pageReference", pageReference);
},

navigateToMyComponent: function (component, event, helper) {
    var navService = component.find("navService");
    var pageReference = component.get("v.pageReference");
    event.preventDefault();
    navService.navigate(pageReference);
},})

Child component:

<aura:component implements="force:appHostable, lightning:isUrlAddressable" description="c:CarServiceComponent2" access="global">
<aura:attribute name="requiredFor" type="string" required="true" default="test" />
<aura:attribute name="redirect" type="string" access="global" />
<aura:handler name="change" value="{!v.pageReference}" action="{!c.onPageReferenceChange}"/>
<aura:handler name="init" value="{!this}" action="{!c.onPageReferenceChange}" />
<div style="align-content: center;">
    <div class="c-container slds-theme_default custom-container">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem padding="around-small" size="12">
                <div class="page-section page-header slds-align_absolute-center">
                    <h1>
                        New Skill Requirement
                    </h1>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small" size="12">
                <lightning:layout>
                    <lightning:layoutItem padding="around-small" size="4">
                        <div class="page-section page-main custom-form">
                            <div class="custom-input" style="align-content: center;">
                                <lightning:input aura:id="requiredFor" label="Required For" value="{!v.requiredFor}"
                                    required="true" />
                        </div>
                        </div>
                    </lightning:layoutItem>
                </lightning:layout>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</div>

Child component controller

({
onPageReferenceChange: function(cmp, evt, helper) {
    var myPageRef = cmp.get("v.pageReference");
    var requiredFor = myPageRef.state.c__requiredFor;
    cmp.set("v.requiredFor", requiredFor);
},
doInit: function(component, event, helper){

}})

Baby component:

<aura:component implements="force:appHostable, lightning:isUrlAddressable" access="global">
<aura:attribute name="parentRecord" type="string" required="true" default="test type" />
<aura:attribute name="pageReference" type="object" />
<aura:handler name="init" value="{!this}" action="{!c.onPageReferenceChange}" />
<aura:handler name="change" value="{!v.pageReference}" action="{!c.onPageReferenceChange}"/>
<lightning:navigation aura:id="navService"/>
<div style="align-content: center">
    <div class="c-container slds-theme_default custom-container">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem padding="around-small" size="12">
                <div class="page-section page-header slds-align_absolute-center">
                    <h1>
                        New Product Required
                    </h1>
                </div>
            </lightning:layoutItem>
            <div style="align-content: center;">
                <lightning:layoutItem padding="around-small" size="12">
                    <lightning:layout>
                        <lightning:layoutItem padding="around-small" size="4">
                            <div class="page-section page-main custom-form">
                                <div class="custom-input">
                                    <lightning:input aura:id="parentRecord" value="{!v.parentRecord}" label="Parent Record" required="true" />
                                    <lightning:button variant="brand" class="slds-float_right" label="Next" />
                                </div>
                            </div>
                        </lightning:layoutItem>
                    </lightning:layout>
                </lightning:layoutItem>
            </div>
        </lightning:layout>
    </div>
</div>

Baby component controller:

({
doInit : function(component, event, helper) {

},
onPageReferenceChange: function (cmp, evt, helper) {
    var myPageRef = cmp.get("v.pageReference");
    var parentRecord = myPageRef.state.c__parentRecord;
    cmp.set("v.parentRecord", parentRecord);
}})

Answer 1

there is no standard__controller page reference type page references, you should use standard__component instead of

var pageReference = {
    type: 'standard__component', // there is no standard__controller page reference
    attributes: {
        componentName: 'c__CarServiceComponent2'
    },
        state: {
            "c__requiredFor": "{!v.typename}"
        }
};