bug: IonBackButton on React behaves wildly

[marcoromag]

Hi,

The IonBackButton behaves in very strange manners. In the snipped below. I have created three pages:

Page A routes to Page B
Page B routes to Page C
Page C routes to Page A

Test 1: run app. Page A is displayed
Expected behaviour: The IonBackButton is not shown
Current behaviour: The IonBackButton is present!

Test 2: run app. Click on button 'Go to Page B'. Click on button 'Go to Page C'. Click Back
Expected behaviour: Page C goes back to page B, and the back button is still present because the app can go back to Page A
Current behaviour: the IonBackButton does not show on Page B

const createPage = (title: string, next: string) : React.FC => () => (
  <IonPage>
    <IonHeader>
      <IonToolbar>
          <IonButtons slot="start">
             <IonBackButton/>
          </IonButtons>
          {title}
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <IonButton routerLink={`/${next}`}>Go to page {next}</IonButton>
    </IonContent>
  </IonPage>
)

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
        <IonRouterOutlet>
          <Route exact path="/A" component={createPage('Page A','B')}/>
          <Route exact path="/B" component={createPage('Page B','C')}/>
          <Route exact path="/C" component={createPage('Page C','A')}/>
          <Route exact path="/" render={() => <Redirect to="/A" />} />
        </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.