Access router dependency from child

How-to Discussions
1

Hi!

I have a MainView with a Navigator component. The logic for pushing a path is done in Javascript inside a Class named FooterComponent.

/* The function that pushes the path to the router */
var gotoPage = function(args) { 
    setIcon(args); 
    router.push( 'feed', {} );
};

Whenever I click the button/icon for navigating to the page I get the following error:

Error message: Uncaught ReferenceError: router is not defined

As the error suggests, I dont have a reference to the router from within the child class FooterComponent. How would I go about to get a reference to the router from within the component?

I tried adding this to the top of the class without any luck.

<Router ux:Dependency="router"/>
2

Hi Palton,

not only you have to specify the dependency, but you also have to satisfy it by passing the router along the UX path.

Check the Navigation docs and the Navigation section in Fuse Tutorial, which both cover this nicely.

Hope this helps!

3

Hi Uldis!

Thanks for the reply!

I have added the dependency using

MainView.ux:

<Router ux:Name="router"/>

Page.ux:

<Router ux:Dependency="router"/>

And finally inside the FooterComponent which is placed onto the Page.ux:

<Router ux:Dependency="router"/>

Is there anything missing?

4

Yes Palton, there is something missing. The part about “you also have to satisfy the dependencies”. Which is also explained very well in the two links that I posted earlier.

Here, you specify the dependency:

<Page ux:Class="HomePage">
    <Router ux:Dependency="router" />

and then you pass it, when you’re using the ux:Class:

<App>
    <Router ux:Name="router" />

    <ClientPanel>
        <Navigator DefaultPath="home">
            <HomePage ux:Template="home" router="router" />
5

Ahh, that would do it! That missed my attention.

Thank you!