2

I have an Ionic React project using the blank template from ionic/cli: ionic start.

For reference purposes, I also created a conference template sample application. After working for a while I saw that the page transition in the conference template is smooth coming from right to left when changing pages.

I would also like to do that in my app, but I didn't find the particular piece of code that does that. Any help in finding it out?

Update

My App component:

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <AuthenticationProvider>
          <Route path="/login" component={AuthenticationPage} exact />
          <Route path="/" exact render={() => <Redirect to="/login" />} />

          <SignupProvider>
            <Route path="/signup" component={SignupPage} exact />
          </SignupProvider>
        </AuthenticationProvider>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;

My SignupPage:

const SignupPage: React.FC<RouteComponentProps> = ({ history }) => {
    return (
        <IonPage id='signup-page'>
            <Stuff/>
        </IonPage>
    );
};

export default SignupPage;
Vivere
  • 1,919
  • 4
  • 16
  • 35
  • my hunch is that you are not using the ionic-router correctly but really need to see code example – Aaron Saunders Feb 16 '21 at 03:00
  • @AaronSaunders sure, I added the App component and a Page. If it's not enough, let me know. I'm new to react/ionic and routers so for sure I'm doing something wrong. – Vivere Feb 16 '21 at 12:28

2 Answers2

0

try this... I ha seen weird behavior when I breakup my routes in routerOutlet

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <AuthenticationProvider>
          <SignupProvider>
            <Route path="/login" component={AuthenticationPage} exact />
            <Route path="/" exact render={() => <Redirect to="/login" />} />
            <Route path="/signup" component={SignupPage} exact />
          </SignupProvider>
        </AuthenticationProvider>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);
Aaron Saunders
  • 33,180
  • 5
  • 60
  • 80
  • It doesn't work. And even if it did being mandatory to put all the routes inside all the providers doesn't sound good to me. Something else must be the issue – Vivere Feb 18 '21 at 16:39
0

Have you by chance used the href attribute instead of the routerLink attribute in your links? It should look like this:

<IonRouterLink routerLink="/register">Register</IonRouterLink>

Of course you can also use it on other components than IonRouterLink like:

<IonItem routerLink="/login">...</IonItem>
Leon
  • 31
  • 4