title: Ionic tab bar changes URL but not rendered page
body: <p>I have a tab bar in Ionic React that should display on some pages and not others. I recently upgraded to Ionic React 5.0.7, and since then my tabs have stopped working. Specifically, although clicking on the tabs changes the URLs, it doesn't reliably change the page that's rendered, and instead shows the same page. (For some odd reason, clicking Discover from Profile works, but not vice versa.) Still, console messages from the page I navigate to do appear, even if none of the visual components do. And if I refresh the page, the correct page renders.</p>
  
  <p>I think my code is quite similar to the example <a href="https://github.com/ionic-team/ionic-react-conference-app/tree/master/src/pages" rel="nofollow noreferrer">Ionic React Conference App</a>, so I'm confused what's going on here.</p>
  
  <p>It works properly in @ionic/react and @ionic/react-router version 0.0.10, but not 4.11.10, 5.0.5, or 5.0.7.</p>
  
  <p>TabBar.tsx:</p>
  
  <pre class="lang-js prettyprint-override"><code>const TabBar: React.FC&lt;TabBarProps&gt; = () =&gt;
      &lt;IonTabs&gt;
          &lt;IonRouterOutlet&gt;
              &lt;Route path="/:tab(discover)" component={Discover} exact /&gt;
              &lt;Route path="/:tab(profile)" component={Profile} exact /&gt;
              &lt;Route path="/Page3" component={Page3} /&gt;
          &lt;/IonRouterOutlet&gt;
  
          &lt;IonTabBar slot="bottom"&gt;
              &lt;IonTabButton tab="discover" href="/discover"&gt;
                  &lt;IonIcon icon={search} /&gt;
                  &lt;IonLabel&gt;Discover&lt;/IonLabel&gt;
              &lt;/IonTabButton&gt;
              &lt;IonTabButton tab="profile" href="/profile"&gt;
                  &lt;IonIcon icon={person} /&gt;
                  &lt;IonLabel&gt;Profile&lt;/IonLabel&gt;
              &lt;/IonTabButton&gt;
          &lt;/IonTabBar&gt;
      &lt;/IonTabs&gt;;
  
  export default TabBar;
  </code></pre>
  
  <p>App.tsx:</p>
  
  <pre class="lang-js prettyprint-override"><code>const App: React.FC = () =&gt; {
      return (
          &lt;IonApp&gt;
                  &lt;IonReactRouter&gt;
                      &lt;IonRouterOutlet&gt;
                          &lt;Route exact path="/login" component={Login} /&gt;
                          &lt;Route exact path="/register" component={Register} /&gt;
                          &lt;Route path="/" component={TabBar} /&gt;
                      &lt;/IonRouterOutlet&gt;
                  &lt;/IonReactRouter&gt;
          &lt;/IonApp&gt;
      )
  }
  </code></pre>