Question

我使用的是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>
    );
}

所以这是我的代码，当我单击任何选项卡时，它将重定向到该URL，但未呈现该组件。这一切都是在更新离子版本之后发生的

在我的package.json中

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

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

我的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;

Answer 1

我遇到了这个问题。我是Ionic和React的新手，所以我真的不知道这个问题是否和我的相同，但是我会让您知道我发现了什么。在我的应用程序中，我在应用程序文件中设置了一个路由器，该路由器将/ tabs重定向到名为mainTabs的页面。选项卡实际上是在该mainTabs页面中设置的。问题是，在用于将流量重定向到标签页的路由器设置中，我设置了“ exact = {true}”。这不允许您传递/ tab / *作为可能性。当我将“ exact = {true}”从路线上移到我的标签时，它修复了它。

与离子框架反应的导航问题

1 个答案: