离子反应页面转换

Question

我有一个 Ionic React 项目，使用来自 ionic/cli 的 blank 模板：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;

Answer 1

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