React native 离子框架反应中的导航问题

我正在使用Ionic react，我的应用程序底部有以下选项卡，我想通过单击选项卡从作业和消息导航到与选项卡关联的不同组件。但问题是页面不呈现在点击标签，但如果我刷新我的页面，然后导航工作良好。我不知道我错过了什么

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="/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="/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="/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="/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>
    );
}

我的WithRouterPath组件如下所示

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;

constwithrouterpath=（WrappedComponent，options={}）=>{
const HOC=类扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
Global.isFooterVisible（）；
}
componentDidUpdate（prevProps）{
Global.isFooterVisible（）；
}
render（）{
返回；
}
};
返回HOC；
};
导出默认的路由路径；

我有这个问题。我是离子和反应的新手，所以我不知道这个问题是否和我的一样，但我会告诉你我发现了什么。在我的应用程序中，我在应用程序文件中设置了一个路由器，将/tabs重定向到一个名为mainTabs的页面。这些选项卡实际上是在mainTabs页面中设置的。问题是，在将流量重定向到选项卡页面的路由器设置中，我设置了“exact={true}”。这不允许您将/tab/*作为可能传递。当我把“exact={true}”从我的标签上取下时，它就解决了这个问题。

我和你差不多在同一时间遇到了类似的问题。我发现在检查页面时，页面被正确重定向，但元素类被设置为离子页面不可见。最后我让它工作起来了，但我不得不重新考虑如何保护路由，同时也不得不避免用HOC包住我的TabContainer。希望有帮助。

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;