Несколько макетов в маршрутах Ionic 4 React - PullRequest
Новая
       4

Несколько макетов в маршрутах Ionic 4 React

2 голосов
/ 16 октября 2019

Я настраиваю структуру приложения с несколькими макетами в приложении Ionic 4 React и сталкиваюсь с проблемами с IonContent и IonRouterOutlet.

Я использовал этот (довольно распространенный) подход React для нескольких макетов:https://simonsmith.io/reusing-layouts-in-react-router-4

Идея состоит в том, чтобы использовать функцию рендера React Router для рендеринга различных макетов перед компонентом для маршрута.

В моем случае у меня есть EmptyLayout, который выглядит следующим образом: 

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

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

В моем компоненте приложения я настроил маршрутизацию следующим образом: 

  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, IonContent из компонента SignInостается в DOM и блокирует ForgotPassword. Если я удаляю IonContent, эта проблема исчезает, но мой заголовок больше не отображается.

Если я удаляю IonRouterOutlet, эта проблема исчезает, но я теряю переходы страниц (среди других функций ионной маршрутизации).

Я создал быстрый StackBlitz для иллюстрации этой проблемы: https://stackblitz.com/edit/react-8sb7xz

1 Ответ

1 голос
/ 25 октября 2019

У меня были похожие проблемы с получением правильных маршрутов и я боролся с ограниченной документацией. Но я обнаружил, что путем рендеринга каждого маршрута в <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>
      )}/>
...