React Ionic Tabs nested Routes Animación 无效

Question

我尝试了不同的方式来创建带有选项卡的嵌套路由，想法如下：

• WelcomePage->LoginPage->HomePage(Tab)->RecipePage

问题在于首页的入口动画和离开的情况，在 Welcomepage 到 LoginPage 的情况下，如果它工作，也是从食谱页倒退到首页。

我知道问题在于 IonrouterOutlet 和 Route，因为它们是有组织的，但是我已经将我想到的组合做了我自己，并使用了几种方法来渲染路由中的组件，就像渲染一样，组件，也作为子项。如果有人做了类似的事情并得到了最佳结果，或者可能发生了一些被忽视的事情，我会很感激帮助，谢谢。

这是我的app.tsx（总结一下，我除了/signup还有更多的路由，大概50个路由）：

      <IonApp>
        <IonReactRouter>
          <IonContent> // This Content only makes sense here because, the white space
                         // which replaces the animation turns black, blank looks better.
            <IonRouterOutlet>
              <Route path="/home"> //La ruta de las tabs
                <Home />
              </Route>
              <Route path="/signUp" exact>
                <SignUp />
              </Route>
             </IonRouterOutlet>
          </IonContent>
        </IonReactRouter>
      </IonApp>

My Home.tsx（共 4 条路线）：

    <IonTabs>
      <IonRouterOutlet>
        <Route path="/home/search" exact>
          <Search />
        </Route>
        <Route path="/home/explore" exact>
          <Explore />
        </Route>
        <Redirect exact path="/home" to="/home/search" />
      </IonRouterOutlet>
      <IonTabBar slot="bottom" className="py-1">
        <IonTabButton tab="search" href="/home/search">
          <IonIcon icon={searchOutline} />
          <IonLabel>{textos["page_buscar"]}</IonLabel>
        </IonTabButton>
        <IonTabButton tab="explore" href="/home/explore">
          <IonIcon icon={navigateOutline} />
          <IonLabel>{textos["page_explorar"]}</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>

• 更多图形示例，用于欣赏白屏，这应该是动画，这是在 Android 上。

• 在 iPhone 上，PageRecipesList(/recipes) 到 PageRecipe(/recipe) 的动画（无标签）：

• 在 iphone 上，PageHomeSearch(Tab home/search) 的动画到 PageRecipesList(/recipes)：

• 如果您删除上面评论的内容，将如下所示：

谢谢！

编辑

我想做的一样，但只有一个文件：

app.tsx：

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/login">
          <Login />
        </Route>
        <IonTabs>
          <IonRouterOutlet>
            <Route exact path="/tab1">
              <Tab1 />
            </Route>
            <Route exact path="/tab2">
              <Tab2 />
            </Route>
            <Route path="/tab3">
              <Tab3 />
            </Route>
            <Route exact path="/">
              <Redirect to="/tab1" />
            </Route>
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            <IonTabButton tab="tab1" href="/tab1">
              <IonIcon icon={triangle} />
              <IonLabel>Tab 1</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab2" href="/tab2">
              <IonIcon icon={ellipse} />
              <IonLabel>Tab 2</IonLabel>
            </IonTabButton>
            <IonTabButton tab="tab3" href="/tab3">
              <IonIcon icon={square} />
              <IonLabel>Tab 3</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

想法是这样做：login->tab1，tab1->login。

Answer 1

看看 Ionic 如何在他们的 Ionic React Conference Starter 应用中解决这个问题，特别是来自 App.tsx 的 this snippet 和来自他们的标签组件 MainTabs.tsx 的 this snippet。

从您的示例代码中，以下更改应该可以解决动画问题：

• 在 App.tsx 中，删除 IonContent
• 在 App.tsx 中，使用 render 方法 prop 而不是嵌套 Home 组件（例如，<Route path="/home" render={() => <Home />} /> 而不是 <Route path="/home"><Home /></Route>）
• 同样，使用 Home.tsx 中的 render 方法 prop，带有标签的组件
• 在标签页的组件中（在您的示例中为Search 和Explore）确保使用IonPage，因为这是实现动画导航所必需的（参见docs），例如

<IonPage>
  <IonHeader>...</IonHeader>
  <IonContent>...</IonContent>
</IonPage>

一般来说，按照他们的docs 中的说明和他们的example app 中的说明遵循 Ionic 的架构，它应该可以正常工作。