PWA Toolkit Using ion-router

Stencil
1

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

2

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

3

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

4

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.

5

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
6

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

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

    ionRouterElement.push('/home');
1 Like