guys!

I have a problem with navigation. I'm training to implement isUrlAccessible, but it's not working for me. I have a form with one input field and button, which, on click, should redirect me to another form. But I'm getting error: "Page doesn't exist".

Also, how do you pull value from parent component input and put it into child component input? Here is the code:

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>

</aura:component>

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>

</aura:component>

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){
    
}})