Problème de navigation dans react avec le cadre ionique

Question

J'utilise Ionic react, j'ai des onglets en bas de mon application et je veux naviguer du travail et des messages aux différents composants associés aux onglets sur le clic des onglets. Mais le problème est que la page ne se rend pas sur le clic des onglets, mais si je rafraîchis ma page, la navigation fonctionne bien. Je ne sais pas ce qui m'échappe.

render() {
    const { _token } = this.state;
    let isJobActive = Global.myJobActive();
    let isMessageActive = Global.messageActive();
    let isMoreActive = Global.moreActive();
    let isAddJobActive = Global.addJobActive();

    return (
      <IonReactRouter>
        <IonPage>
          <Route exact path="/" render={() => <Redirect to="/home" />} />
          <IonTabs>
            <IonRouterOutlet>
              {/* message */}
              <Route
                path="/messages"
                component={WithRouterPath(MessagesHome)}
                exact={true}
              />

              {/* jobs */}
              <Route
                path="/add-job"
                component={WithRouterPath(PostJob)}
                exact={true}
              />
              <Route
                path="/my-jobs"
                component={WithRouterPath(MyJobs)}
                exact={true}
              />
              <Route
                path="/more-option"
                component={WithRouterPath(MoreOptions)}
                exact={true}
              />

            </IonRouterOutlet>

            {/* <div className="footer_menu"> */}
            <IonTabBar slot="bottom">
              <IonTabButton
                tab="addjob"
                href="stackoverflow.com/add-job"
                onClick={() => {
                  this.setState({
                    isJobActive: 0,
                    isMessageActive: 0,
                    isMoreActive: 0,
                    isAddJobActive: 1
                  });
                }}
              >
                <AddJob isActive={isAddJobActive} />
                <IonLabel>Add Job</IonLabel>
              </IonTabButton>
              <IonTabButton
                tab="myjobs"
                href="stackoverflow.com/my-jobs"
                onClick={() => {
                  this.setState({
                    isJobActive: 0,
                    isMessageActive: 0,
                    isMoreActive: 0,
                    isAddJobActive: 1
                  });
                }}
              >
                <MyJob isActive={isJobActive} />
                <IonLabel>My Jobs</IonLabel>
              </IonTabButton>
              <IonTabButton
                tab="messages"
                href="stackoverflow.com/messages"
                onClick={() => {
                  this.setState({
                    isJobActive: 0,
                    isMessageActive: 1,
                    isMoreActive: 0,
                    isAddJobActive: 0
                  });
                }}
              >
                <Message isActive={isMessageActive} />
                <IonLabel>My Messages</IonLabel>
              </IonTabButton>
              <IonTabButton
                tab="more-option"
                href="stackoverflow.com/more-option"
                onClick={() => {
                  this.setState({
                    isJobActive: 0,
                    isMessageActive: 0,
                    isMoreActive: 1,
                    isAddJobActive: 0
                  });
                }}
              >
                <More isActive={isMoreActive} />
                <IonLabel>More</IonLabel>
              </IonTabButton>
            </IonTabBar>
            {/* </div> */}
          </IonTabs>
        </IonPage>
      </IonReactRouter>
    );
}

Voici donc mon code : lorsque je clique sur un onglet, il redirige vers cette URL, mais le composant n'est pas rendu. Je n'ai pas eu le temps de le faire, mais j'ai eu le temps de le faire.

Dans mon package.json

"@ionic/react": "^4.11.4",
"@ionic/react-router": "^4.11.4",

"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",

et mon composant WithRouterPath est le suivant

const WithRouterPath = (WrappedComponent, options = {}) => {
  const HOC = class extends Component {
    constructor(props) {
      super(props);
    }

    componentDidMount() {
      Global.isFooterVisible();
    }

    componentDidUpdate(prevProps) {
      Global.isFooterVisible();
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };

  return HOC;
};

export default WithRouterPath;

Answer 1

J'ai rencontré ce problème. Je suis nouveau à Ionic et React, donc je ne sais pas vraiment si ce problème est le même que le mien, mais je vais vous faire savoir ce que j'ai trouvé. Dans mon application, j'avais un routeur configuré dans le fichier de l'application qui redirigeait /tabs vers une page appelée mainTabs. Les onglets étaient en fait configurés dans cette page mainTabs. Le problème était que dans les paramètres du routeur pour rediriger le trafic vers la page des onglets, j'avais mis "exact={true}". Cela ne permet pas de passer /tab/* comme possibilité. Lorsque j'ai supprimé "exact={true}" de la route menant à mes onglets, le problème a été résolu.