Awesome, I am going to close this issue out as completed, as the main issue reported is resolved.

If any run into any other issues, feel free to open a new issue and the team would be happy to take a look.

Hello @m3thom looking into this issue again.

I believe the routing structure may be a driving factor to the issue here.

The /login page does not fit within mobile tabs navigation rules. The route is a root route, but is being rendered inside of the tabs router outlet, having the tab bar being displayed when the route is active. The tab bar should only be displayed for tab pages, or sub-pages of tabs (that are within the stack).

There are two valid solutions I see with this use case:

Login is a root route outside of the tabs outlet

Treating the /login page as a page outside of the tabs outlet will result in the page being full height (not displaying the tab bar). This pattern is most often use when the entire tabs experience is protected by authentication.

e.g.:

const App: React.FC = () => (
  <ProvideAuth>
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route exact path="/login">
            <Login />
          </Route>
          <IonTabs>
            <IonRouterOutlet>
              <Route exact path="/tab1">
                <Tab1 />
              </Route>
              <Route exact path="/tab2">
                <Tab2 />
              </Route>

              <PrivateRoute path="/tab3">
                <Tab3 />
              </PrivateRoute>

              <Route exact path="/">
                <Redirect to="/tab1" />
              </Route>
            </IonRouterOutlet>
            <IonTabBar slot="bottom">
              <IonTabButton tab="tab1" href="/tab1">
                <IonIcon icon={triangle} />
                <IonLabel>Tab 1</IonLabel>
              </IonTabButton>
              <IonTabButton tab="tab2" href="/tab2">
                <IonIcon icon={ellipse} />
                <IonLabel>Tab 2</IonLabel>
              </IonTabButton>
              <IonTabButton tab="tab3" href="/tab3">
                <IonIcon icon={square} />
                <IonLabel>Tab 3</IonLabel>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  </ProvideAuth>
);

<video src="https://user-images.githubusercontent.com/13732623/201206944-952dfece-c028-4397-9cdb-fa9455cf33e2.mp4"></video>

I did have to tweak some of the logic around the location state, repro: https://github.com/sean-perkins/ionic-gh-21717

Use a modal in place of a protected route

If the true desire is to allow unauthenticated users to access tab 1 and tab 2, but have to sign into access tab 3, a modal experience that takes over the fullscreen when tab 3 is activated would be desired.

I experimented with trying to render the private route inside of the tab3 routing structure, but this leads to other problems, that activating the tab bar button for tab3 attempts to route to /tab3, but is redirected to /tab3/login when unauthenticated. This results in a push transition which looks bad and is probably an anti-pattern for navigation.

Can you try either of these suggestions and let me know if that resolves your issue or if you observe anything else?

I tried this in App.tsx which stopped the error:

<Redirect to={{pathname: "/login", state: {from: {pathname: routeProps.location.pathname}}}}/>

And this in Login.tsx:

interface MyLocationState {
  from: {pathname: string};
}

...

  const location = useLocation<MyLocationState>();
  const { from } = location.state || { from: { pathname: "/" } };
  console.log("from:", from);

  const login = async (e: React.FormEvent) => {
    e.preventDefault();
    setFormSubmitted(true);
    await setIsLoggedIn(true);
    await setUsernameAction(username);
    history.replace(from);
    // history.push('/tabs/schedule', {direction: 'none'});
  };

But as seen from the log, the value is overwritten so the redirect won’t work:

from:  Object { pathname: "/" } Login.tsx:31
from:  Object { pathname: "/support" } Login.tsx:31
from:  Object { pathname: "/login" } Login.tsx:31

Hi @jeffcjohnson,

I noticed passing in the routeProps.location to the state is what is seeming to cause an infinite render somewhere inside react router. This is happening because the value of location changes each render. Are you able to pull off just the pathname from location, instead of passing the whole object?:

<Redirect to={{pathname: "/login", state: {from: routeProps.location.pathname}}}/>