Conditionally redirecting to another page

Ionic Framework Ionic React
1

Using Ionic React, I am trying to Redirect a user to a different page based on some state - for this example, it is local storage but it could also be remote state however retrieving this state is async.

Traditionally, I’d return a Redirect component but this brakes all kinds of functionality in Ionic and it’s been widely reported in Github Issues without any proper solutions. I’ve also tried to use history.replace which works but has a small downside.

I guess I am wondering how others have resolved this problem. The particular use case is: user clicks on a tab - we need to check if they completed onboarding for this feature - if they have completed, we show them the main page, otherwise redirect them to an “intro” page.

Contrived example:

function Academy() {
  const { surveyComplete, loading } = useAcademyWelcome()

  if (loading || surveyComplete === undefined) return null

  if(surveyComplete !== true) return <Redirect to='/academy/survey' />

  return (
    <IonPage>
      <IonContent>
        <InvestingPosts />
      </IonContent>
    <IonPage>
  )
}

The above create several problems, the main one being If the user moves to a different tab, they cannot return to this tab and continue where they left off as the page never renders.

2

You can use the useHistory() hook:

  const history = useHistory();
  return (
    <IonButton
      onClick={() => {
        history.push(routeTabHome);
      }}
    >
      <Trans id="button.home">Go Home</Trans>
    </IonButton>

If you are having trouble with the tab redirect, I would put the redirect in the tabbar component, not the tab component.