stencil-community / stencil-router

A simple router for Stencil apps and sites

Home Page:https://stenciljs.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Expose history as prop on stencil-router

MrAntix opened this issue · comments

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):
1.0.1

I'm submitting a ... (check one with "x")
[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
I have an auth component in the app-root same place as the stencil-router
this component is used on all "pages" so it part of the flow outside the router
it raises events which require routing but RouterHistory is not available here, I have also tried injectHistory

Expected behavior:
May we have the state property exposed so that we can use ref to get hold of it to do programmatic navigation?

Related code:
https://github.com/ionic-team/stencil-router/blob/master/packages/router/src/components/router/router.tsx#L47

I have a similar issue: I have a side bar menu that lives outside of <stencil-route-switch>. When a user clicks on a menu item, I want to programmatically "redirect" the user using history.

I was able to work around the issue by invoking the following line after my component class declaration:

@Component({...})
export class SideBar
{
   @Prop() history: RouterHistory;
...
}

injectHistory(SideBar);

With that in place, my SideBar component will now have a value assigned to the history property.

the docs outline the solution you mention
but it doesn't work for the root element containing the stencil-router element

I take that back!
injectHistory does work on the app-root - thanks for encouraging me to try again

I'll close this