IonReactRouter: Target page not rendered after history.push()

@shadowbrush wrote:

After upgrading from ionic/react@0.07 to 4.11.0, opening a new page through history.push() does not always render the target page.

I’ll paste my app.tsx below.

It may have to do with React Router’s inclusive routing. It appears navigating from the first route (/:tab(wallet)) to one of the other routes will not render the target page, but the browser continues to show this first route. The address bar does show the new url. When hitting refresh, the new page is shown. And I can navigate to the first route again without problem: the page of this first route will be rendered and replace the previous page.

I tried adding a Switch to get back to exclusive routing, but that didn’t help.

Anyone have a thought on this one? Thanks!

Holger

    <IonApp>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <AppMenu/>
          <IonPage id="main">
            <IonTabs>
              <IonRouterOutlet>
                <Route exact path="/:tab(wallet)" component={PurchasesPage}/>
                <Route exact path="/:tab(wallet)/card/:id" component={PurchasePage}/>
                <Route exact path="/:tab(wallet)/brands/:pageMode" component={VendorsPage}/>
                <Route exact path="/:tab(wallet)/buy-card/:vendorId" component={NewPurchasePage}/>
                <Route exact path="/:tab(wallet)/add-card/:vendorId" component={NewUploadedPurchasePage}/>
                <Route exact path="/:tab(wallet)/new-transfer/:id" component={NewPurchaseTransferPage}/>
                <Route exact path="/:tab(wallet)/barcode/:id" component={BarcodePage}/>
                <Route exact path="/:tab(account)" component={UserAccountPage}/>
                <Route exact path="/about" component={AboutPage}/>
                <Route exact path="/sign-in" component={SignInPage}/>
                {/*<Route exact path="/" render={(): ReactElement<any> => <Redirect to="/wallet"/>}/>*/}
              </IonRouterOutlet>
              <IonTabBar slot="bottom">
                <IonTabButton tab="wallet" href="/wallet">
                  <IonIcon icon={wallet}/>
                  <IonLabel>Wallet</IonLabel>
                </IonTabButton>
                <IonTabButton tab="account" href="/account">
                  <IonIcon icon={settings}/>
                  <IonLabel>Account</IonLabel>
                </IonTabButton>
              </IonTabBar>
            </IonTabs>
          </IonPage>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>

Posts: 1

Participants: 1

Read full topic