Ionic 4 React 路线中的多种布局

Question

我正在 Ionic 4 React 应用程序中设置多布局应用程序结构，运行遇到 IonContent 和 IonRouterOutlet 的问题。

我已经将这种（相当常见的）React 方法用于多种布局：https://simonsmith.io/reusing-layouts-in-react-router-4

概念是利用 React Router 的 render 函数在路由的组件之前渲染不同的布局。

在我的例子中，我有一个 EmptyLayout，它看起来像这样：

  render() {
    const { component: Component, ...rest } = this.props;

    return (
      <Route {...rest} render={routeProps => (
        <>
          <Header />
          <IonContent>
            <Component {...routeProps} />
          </IonContent>
        </>
      )} />
    )
  }
};

在我的 App 组件中，我的路由设置如下：

  render() {
    return (
      <IonApp>
        <IonReactRouter>
          <IonRouterOutlet>
            <Route path="/" component={Home} exact />
            <EmptyLayout path="/signup" component={SignUp} exact />
            <EmptyLayout path="/signin" component={SignIn} exact />
            <EmptyLayout path="/confirm-email" component={ConfirmEmail} exact />
            <EmptyLayout path="/forgot-password" component={ForgotPassword} exact />
            <EmptyLayout path="/reset-password" component={ResetPassword} exact />
          </IonRouterOutlet>
        </IonReactRouter>
      </IonApp>
    )
  }
}

export default App;

当使用 React Router Link 从 /signin 导航到 /forgot-password 时，SignIn 组件中的 IonContent 保留在 DOM 中，并阻止了 ForgotPassword。如果我删除 IonContent，这个问题就会消失，但我的 header 不再呈现。

如果我删除 IonRouterOutlet，这个问题就会消失，但我会丢失页面转换（以及其他 Ionic 路由功能）。

我创建了一个快速 StackBlitz 来说明这个问题： https://stackblitz.com/edit/react-8sb7xz

Answer 1

我在正确呈现路由时遇到过类似的问题，并且在有限的文档中苦苦挣扎。但我发现通过在 <IonPage><IonContent>...</IonContent></IonPage> 中渲染每条路线，我可以让它们正常工作。

我相信你所做的恰恰相反，<IonContent><IonPage>...<IonPage></IonContent>。

当这些在您的 StackBlitz 中切换时，它似乎可以正确呈现。 https://stackblitz.com/edit/react-t6oauu?file=index.js

    const Hello = ({history}) => {
      return (
        <IonContent>
          <h1>Hello!</h1>
          <IonButton onClick={() => history.push("/bye")}>
            Goodbye
          </IonButton>
        </IonContent>
      )
    };

      <Route exact path="/" render={props => (
        <IonPage>
          <p>Fake Header</p>
          <Hello />
        </IonPage>
      )}/>

Ionic 4 React 路线中的多种布局

Multiple layouts in Ionic 4 React routes

typescript

reactjs

react-router

ionic4