PWA Toolkit Using ion-router

is there any way to programmatically access the router object? If it is in the documentation… my apologies, I missed it

The bottom of this article: https://www.joshmorony.com/stack-based-navigation-push-pop-with-ionic-web-components/ has a section called “Navigating Programmatically” where he grabs nav by element. Not sure if that’s helpful for you, but it worked for me… Not sure if router element and nav element are the same thing though

iam not using the ion-nav, i am using ion-route

Did you ever find a solution to this? I’m doing the same thing - using Stencil CLI to create an Ionic PWA.

My router works fine:

        <ion-router useHash={false}>
          {!this.isLoggedIn &&
            <ion-route-redirect from="*" to="/loading"/>
          }

          <ion-route url="/" component="app-home" />
          <ion-route url="/login" component="app-login" />
          <ion-route url="/profile/:name" component="app-profile" />
          <ion-route url="/loading" component="app-loading" />
        </ion-router>

But from the loading page, I need to be able to redirect to either the login or the home page depending on the status of their authentication.

I can’t find any docs for how to programmatically access the router.

Here’s the best solution I could find. Instead of trying to manage routing in a component or in my case a redux action, just do it in the ion-router in app-root.

chooseDefaultRoute = () => {
  if (!this.authInited) {
    return <ion-route-redirect from="*" to="/loading" />;
  } else if (this.authInited && !this.user) {
    return <ion-route-redirect from="*" to="/login" />;
  } else if (this.authInited && this.user) {
    <ion-route-redirect from="*" to="/" />
  }
};

render() {
  return (
    <ion-app>
      <ion-router useHash={false}>
        { this.chooseDefaultRoute() }

        <ion-route url="/" component="app-home" />
        <ion-route url="/login" component="app-login" />
        <ion-route url="/profile/:name" component="app-profile" />
        <ion-route url="/loading" component="app-loading" />
      </ion-router>
      <ion-nav />
    </ion-app>
  );
}

https://stencil-worldwide.slack.com/conversation/C79EANFL7/p1537394141000100

The router will monitor my authInited and user properties (updated via redux). If the Firebase auth check has not completed, I temporarily show a loading page with a logo/spinner. Once the Firebase auth check has completed, my user will either be an object or null. If it’s null, I router the user to the login page. If the user is an object, I route them to the app home page.

1 Like

All of the properties and events you can just access them this way.

 ionRouterElement = document.querySelector('ion-router');

    ionRouterElement.push('/home');

I have a geeky friend who often used to do such things.I think i have heard from him someday that he has programmatically access his router.He too has recommended me to do so.He has written the steps in brief from his facebook page.