bug: [react]: <Route> with a match breaks the IonBackButton behaviour

[marcoromag]

In the example below, the simple app routes through three pages:

• page one has its own individual route on /article/one
• page two and page three share the route on /article/:articleId(.*)
• each page has a button that links to the next page: one -> two -> three -> one -> ...

Test:

• click on page 1 next button, page 2 is displayed and IonBackButton is enabled
• click on page 2 next button, page 3 is displayed, IonBackButton is still enabled
• click on back button

Expected behaviour

• clicking on Back link, the router shall go to page 2

Current behaviour:

• nothing happens.

NOTE: This has something to do with the fact that IonRouterOutlet register a router entry per- element. In case of page 2 and page 3, they both belong to the same route, hence the ViewStackManager does not see any route change...
I did intentionally put the page one outside of the catch-all route, otherwise the back button would never display

const pageConfig : {[k : string] : {title:string, link:string}} = 
{
  'one': {title: 'Page one', link:'two'},
  'two': {title: 'Page two', link:'three'},
  'three': {title: 'Page three', link:'one'},
}

const Article: React.FC<{articleId: string}> = ({articleId}) => (
  <IonPage>
    <IonHeader>
      <IonToolbar>
          <IonButtons slot="start">
             <IonBackButton/>
          </IonButtons>
          {pageConfig[articleId].title}
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <IonButton routerLink={`/article/${pageConfig[articleId].link}`}>Go to page <strong>{pageConfig[articleId].link}</strong></IonButton>
    </IonContent>
  </IonPage>
)

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
        <IonRouterOutlet>
        <Route exact path="/article/one" render={(props) => {
            if (!props) return <></>;
            return <Article articleId="one"/>
          }}/>
          <Route exact path="/article/:articleId(.*)" render={(props) => {
            if (!props) return <></>;
            return <Article articleId={props.match.params.articleId}/>
          }}/>
          <Route exact path="/" render={() => <Redirect to="/article/one" />} />
        </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;

[marcoromag]

should be solved with the solution of #19891

[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.