Get an instance of a current router

[felagund18]

<nav-component/>

<stencil-router id="mainRouter">
  <stencil-route-switch scrollTopOffset={0}>
    <stencil-route url='/' component='app-home' exact={true} />
    <stencil-route url='/profile/:name' component='app-profile' />
    <stencil-route component='app-404' />
  </stencil-route-switch>
</stencil-router>

Hello guys, in a case above, how to get an instance of the current router which is a #mainRouter in nav-component to push, pop navigation?

[felagund18]

Or do I have to put <nav-component/> in an every single page component? In <nav-component/>, I followed Navigating Programmatically but it does not work. this.history object is always null. But when wrapping <nav-component/> in a page, this.history returns RouterHistory. How do I access the current router outside of <stencil-router/>

[jthoms1]

If you want to have a component outside of a route you can. Follow this guide. It would be similar to accessing it from a deep component.

https://github.com/ionic-team/stencil-router/wiki/Inject-history-into-a-deep-component

Although I would recommend that you create a generalized layout (ie `page-layout') that includes your nav-component and have it wrap all the children of your other components.

<page-layout>
 Contents of app-home
</page-layout>

[felagund18]

Hi @jthoms1 I wrapped all child component in a layout but deep injection seems not working (this.history === null). Then I tested default router demo using

"dependencies": {
    "@stencil/core": "^0.13.0-13",
    "@stencil/router": "^0.3.0"
},

but

1. Demo link 4
2. this.history should be JSON string this.history is still null.

Is it a bug or?

[numerized]

I have the same problem. No matter what I do RouterHistory Prop is always null

[numerized]

I use the tag ion-anchor> to bypass the problem.