离子反应页面过渡

问题描述

我有一个使用 ionic/cli 的 blank 模板的 Ionic React 项目：ionic start。

出于参考目的，我还创建了一个 conference 模板示例应用程序。工作一段时间后，我看到 conference 模板中的页面转换在更改页面时从右向左平滑。

我也想在我的应用程序中执行此操作，但我没有找到执行此操作的特定代码段。有什么帮助找出来吗？

更新

我的应用组件：

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;

我的注册页面：

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

export default SignupPage;

解决方法

试试这个...当我在 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>
);