Ionic navigation double rendering when using protected routes

Ionic Framework Ionic React
1

Jul-30-2020 10-46-26
Jul-30-2020 10-46-26374×612 3.32 MB

Link to the test app: https://creators-dashboard-nirav6.developers1.vercel.app/

App animates/flows perfectly when using no conditional rendering, but as you can see in the gif it animates 2-3 times when logging out and logging back in to the app.

Problems I’ve noticed:

  • animation occurs 2-3 times
  • ‘/dashboard/statistics’ route display full black

Solutions I’ve tried:

  • conditional rendering the routes
  • confirmed the <IonPage> and <IonContent> tags on all the pages.

Code for Navigation:

    <IonApp>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <Menu />
          <IonRouterOutlet id="main">
            <Route exact path="/">
              <IntroductionPage />
            </Route>
            <Route exact path="/login">
              <Login />
            </Route>
            <Route exact path="/dashboard/statistics">
              {loginInfo.isLoggedIn ? <Statistics /> : <Redirect to="/login" />}
            </Route>
            <Route exact path="/dashboard/earnings">
              {loginInfo.isLoggedIn ? <Earnings /> : <Redirect to="/login" />}
            </Route>
            <Route exact path="/dashboard/about">
              {loginInfo.isLoggedIn ? <AboutForm /> : <Redirect to="/login" />}
            </Route>
            <Route exact path="/dashboard/settings">
              {loginInfo.isLoggedIn ? <Settings /> : <Redirect to="/login" />}
            </Route>
            <Route exact path="/dashboard/connect">
              {loginInfo.isLoggedIn ? <AccountConnect /> : <Redirect to="/login" />}
            </Route>
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>
2 Likes
2

Hmm, can’t really guess from just this. Can you provide an actual code example?
As well as your package versions for react router?

3

The code for the project: https://github.com/Niravpatel129/Ionic-project/blob/84614485b80c584ae8dcf84833673f8f9bdc9ce7/src/App.tsx

Version for the React Router: “^5.0.7”,

4

So the only thing that stands out is the order of operations in the logins.

For example:

  const handleDemoLogin = async () => {
    setLoading(true)
    try {
      setLoading(false)
      history.push('/dashboard/statistics')
      await loginContext.handleLogin({
        username: 'Demo',
        avatar: '',
        email: 'Demo@email.com',
        accessToken: '123',
        authStrategy: 'demo',
      })
    } catch (error) {
      setLoading(false)
      alert(error)
    }
  }

This triggers a navigation, but then also toggles some state change on the component, which could cause some issues. I changed the order so that the navigation happens at the very end of the order of operations.

  const handleDemoLogin = async () => {
    setLoading(true)
    try {
      setLoading(false)
      await loginContext.handleLogin({
        username: 'Demo',
        avatar: '',
        email: 'Demo@email.com',
        accessToken: '123',
        authStrategy: 'demo',
      })
      history.push('/dashboard/statistics')
    } catch (error) {
      setLoading(false)
      alert(error)
    }
  }

And could not replicate.

2 Likes
5

Thank you very much, the solution works great!

1 Like
6

Hey Mike, one more thing the app seems to freak out again and go back into problems with navigation when prompted with a scenrio of freshing while logged in and logging out currently the logout logic is like this:

 onClick={() => {
              loginContextData.handleLogout()
              history.replace('/')
            }}

would the way the login / logout is handled in the context the right way to do it paired with ionic?

Bug:

  • instead of moving forward after the post login screen, it returns to the login page (not sure why) and only occures when refreshing on the /dashboard/statistics route and logging out and relogging in.
    Jul-30-2020 16-27-49