Page does not re-render on Tabs navigation

When I navigate for the 1st time to the AddCustomer tab - I can see the alert; the subsequent times - no alert. It means that the AddCustomer component is rendered only once.
Is that by design?
How can that be fixed?
Thanks

App.tsx

  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Redirect exact from="/" to="/add-customer" />

          <Route exact path="/customer-list">
            <CustomerList />
          </Route>

          <Route exact path="/add-customer">
            <AddCustomer  />
          </Route>
        </IonRouterOutlet>

        <IonTabBar slot="bottom">
          <IonTabButton tab="customer-list" href="/customer-list">
            <IonIcon icon={list} />
            <IonLabel>Customers</IonLabel>
          </IonTabButton>

          <IonTabButton tab="add-customer" href="/add-customer">
            <IonIcon icon={add} />
            <IonLabel>Add customer</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

CustomerList.tsx

const CustomerList: React.FC = () => {
  return (
    <IonPage>
      <IonContent fullscreen>
        <div>foo</div>
      </IonContent>
    </IonPage>
  );
};

AddCustomer.tsx

const AddCustomer: React.FC = () => {
  useEffect(() => {
     alert(123);
  }, []);

  return (
    <IonPage>
      <IonContent>
       <div>bar</div>
      </IonContent>
    </IonPage>
  );
};

2 posts - 2 participants

Read full topic