Ionic React 选项卡无法正确切换页面的问题

Question

我一直在尝试在我的 Ionic React 应用程序中设置一个简单的选项卡导航，将一个页面链接到另一个页面，但我似乎无法做到正确。我已经使用相同的结构在其他页面上实现了类似的选项卡，并且它们工作得很好。但是，对于我的登陆页面，选项卡无法按预期工作。

此设置在其他页面上完美运行：

ionic

const Perfil: React.FC = () => {
  return (
    <IonTabs>
      <IonTabBar slot="bottom">
        <IonTabButton tab="Tab1perfil" href="/menu/perfil/Tab1perfil">
          <IonIcon icon={personOutline} />
          <IonLabel>Perfil</IonLabel>
        </IonTabButton>
        <IonTabButton tab="Tab2perfil" href="/menu/perfil/Tab2perfil">
          <IonIcon icon={settingsOutline} />
          <IonLabel>Configurações</IonLabel>
        </IonTabButton>
      </IonTabBar>
      <IonRouterOutlet>
        <Route path="/menu/perfil/Tab1perfil" component={Tab1perfil} />
        <Route path="/menu/perfil/Tab2perfil" component={Tab2perfil} />
        <Route exact path="/menu/perfil">
          <Redirect to="/menu/perfil/Tab1perfil" />
        </Route>
      </IonRouterOutlet>
    </IonTabs>
  );
};

这是我的登陆页面的代码，它没有按预期工作：

ionic

const Inicial: React.FC = () => {
  return (
    <IonTabs>
      <IonTabBar color={"dark"} slot="bottom">
        <IonTabButton tab="Ofertas" href="/menu/Inicial/Ofertas">
          <IonIcon color="tbpink" icon={pricetagOutline} />
          <IonLabel color="tbpink">Ofertas</IonLabel>
        </IonTabButton>
        <IonTabButton tab="Trending" href="/menu/Inicial/Trending">
          <IonIcon color="tbpink" icon={flameOutline} />
          <IonLabel color="tbpink">Populares</IonLabel>
        </IonTabButton>
      </IonTabBar>
      <IonRouterOutlet>
        <Route path="/menu/Inicial/Trending" component={Trending} exact />
        <Route path="/menu/Inicial/Ofertas" component={Ofertas} exact />
        <Route exact path="/menu/Inicial">
          <Redirect to="/menu/Inicial/Ofertas" />
        </Route>
      </IonRouterOutlet>
    </IonTabs>
  );
};

export default Inicial;

这是我的

App.tsx

的背景：

ionic

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/">
          <Login />
        </Route>
        <Route path="/register" component={Register} exact />
        <Route path="/login">
          <Login />
        </Route>
        <Route path="/menu" component={Menu} />
        <Route path="/Trending" component={Trending} />    
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;

上下文登录功能：

ionic

const [present, dismiss] = useIonLoading();
const router = useIonRouter();

const DoLogin = async (event: any) => {
  event.preventDefault();
  await present("Fazendo Login...");
  setTimeout(async () => {
    dismiss();
    router.push("/menu", "root");
  }, 200);
  console.log("DoLogin");
};

我的菜单组件：

ionic

const Menu: React.FC = () => {
  const paths = [
    { name: "Inicial", url: "/menu/inicial", icon: homeOutline },
    { name: "Perfil", url: "/menu/perfil", icon: personOutline },
    { name: "Carrinho", url: "/menu/carrinho", icon: cartOutline },
    { name: "Configurações", url: "/menu/settings", icon: settingsOutline },
  ];

  return (
    <IonPage color={"dark"}>
      <IonContent color={"dark"}></IonContent>
      <IonMenu color="tbpurple" contentId="main">
        <IonHeader color="tbpink">
          <IonToolbar color={"dark"}>
            <IonTitle color="tbpink">Menu</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent color="dark" className="ion-padding">
          {paths.map((item, index) => (
            <IonMenuToggle key={index}>
              <IonItem
                color={"dark"}
                routerLink={item.url}
                routerDirection="none"
              >
                <IonIcon slot="start" color="tbpink" icon={item.icon} />
                <IonText color={"tbpink"}>{item.name}</IonText>
              </IonItem>
            </IonMenuToggle>
          ))}
        </IonContent>
      </IonMenu>
      <IonRouterOutlet id="main">
        <Route exact path="/menu/Inicial" component={Inicial} />
        <Route path="/menu/settings" component={Settings} />
        <Route path="/menu/perfil" component={Perfil} />
        <Route exact path="/menu">
          <Redirect to="/menu/Inicial" />
        </Route>
      </IonRouterOutlet>
    </IonPage>
  );
};

export default Menu;

请帮忙，我快疯了，我无法弄清楚这一点。抱歉拼写错误，英语不是我的母语:)

Answer 1

问题出在

Menu

组件中，渲染

Inicial

组件的路由只能完全匹配

"/menu/inicial"

，这显然会排除所有子路由，例如

"/menu/incial/trending"

和

"/menu/incial/Ofertas"

无法匹配和渲染。

<IonRouterOutlet id="main">
  <Route
    exact                // <-- problem!
    path="/menu/Inicial" // <-- only exactly this path can match!
    component={Inicial}
  />
  <Route path="/menu/settings" component={Settings} />
  <Route path="/menu/perfil" component={Perfil} />
  <Route exact path="/menu">
    <Redirect to="/menu/Inicial" />
  </Route>
</IonRouterOutlet>

从

exact

路由中删除

Inicial

属性，以便任何以

"/menu/inicial"

作为路径前缀的路由也可以匹配和渲染。

<IonRouterOutlet id="main">
  <Route
    path="/menu/Inicial" // <-- "/menu/inicial/*"
    component={Inicial}
  />
  <Route path="/menu/settings" component={Settings} />
  <Route path="/menu/perfil" component={Perfil} />
  <Redirect exact from="/menu" to="/menu/Inicial" />
</IonRouterOutlet>