Correctly navigating off of a Login page

Ionic Framework Ionic React
1

I’m starting out with the Ionic Framework and I’m a bit confused on how to correctly set up my Routes.

On first boot, my app contains a IonRouterOutlet which decides to either render Login or App if the user is already logged in:

          <IonRouterOutlet id="main">
            <Route path="/app" render={() => <App />} />
            <Route
              path="/login"
              render={({ history }) => <Login history={history} />}
            />
            <Route exact path="/" render={() => <Redirect to="/login" />} />
          </IonRouterOutlet>

On successful login, I want to navigate to /app.

  const history = useHistory()

  const doLogin = (payload: any) => {
    history.replace('/app')
  };

Here I use replace as I don’t want users to be able to go back to the login page by swiping back.

Unfortunately this also means that there is no animation between /login and /app, which doesn’t look great.

What’s the correct way to do this navigation? The docs seem a bit sparse on how to use Navigation component in a real world example.

2

why don’t u use the react way of navigating to /app in doLogin() and then in /app replace the history? That way you get the nice navigation UI and in /app you replace the history.

I don’t know how in React you programmatically do a route change. In Angular it can be something like

this.router.navigateToUrl(‘/app’);

3

This is the React way of navigating to /app

If I first do history.push('/app') and then replace it, it will replace /app, not /login. So the user will still be able to go back to the login page.

4

So, then use history.push("/app");

to get the nice transition

And then when /app is opened, so a history.replace('/app') to achieve the desired behaviour on back button?

5

That’s what I’m saying, by that point /login will already be in the history stack, calling replace will just remove the current /app and replace it with a new /app.