[ion-router] the path does not match any route

Stencil
1

Hi

I am using ionic v4 using Stencil (no JS frameworks) and I am getting an error only on iOS devices that says this:


[Error] [ion-router] the path does not match any route
	(anonymous function) (ion-router.entry.js:549)
	asyncFunctionResume
	(anonymous function) (ion-router.entry.js:436)
	asyncFunctionResume
	(anonymous function)
	promiseReactionJob

I am unsure of why this happens. What I am trying to do is click open the tab menu. It works on the web desktop and Android web but it doesn’t work on iOS browser (have tried Safari, Chrome and Firefox dev tools)

Code below.

import { Component, h } from '@stencil/core';

@Component({
  tag: 'app-root',
  styleUrl: 'app-root.css'
})
export class AppRoot {

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

  goToWindow(url) {
    const ionRouterElement = document.querySelector('ion-router');
    const ionMenuElement = document.querySelector('ion-menu'); 
    ionRouterElement.push(url);
    ionMenuElement.close();
  }

  render() {
    return [
      <ion-app>
        <ion-menu side="start" contentId="menu-content">
          <ion-header>
            <ion-toolbar color="primary">
              <ion-title>Navigation</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content>
            <ion-list>
              <ion-item onClick={_ => this.goToWindow('/')}>
                Home
              </ion-item>
              <ion-item onClick={_ => this.goToWindow('/stats')}>
                Stats
              </ion-item>
            </ion-list>
          </ion-content>
        </ion-menu>
        <ion-router useHash={false} id="menu-content">
          <ion-route url="/" component="app-home" />
          <ion-route url="/stats" component="app-stats" />
        </ion-router>
        <ion-nav />
      </ion-app>,
      <ion-menu-controller></ion-menu-controller>
    ];
  }
}