Navigation problem in react with ionic framwork

Question

I am using Ionic react I have below tabs on the bottom of my app and want to navigate from job and messages to different components associated with tabs on the click of tabs. But the issue is Page do not render on the click of tabs but if I refresh my page then navigation works fine. I don't know what I am missing here.

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>
    );
}

So this is my code when I click any tab it redirects to that URL but didn't render the component. This all happened after I update ionic version

In my package.json

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

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

and my WithRouterPath component is like below

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;

I had a similar issue around the same time as you. What I found was when inspecting the page, the page was redirected correctly but the element class was set to ion-page-invisible. I got it working in the end but had to rethink how I protected routes and also had to avoided wraping my TabContainer with a HOC. Hope that helps. — JavaJedi

Bradley Bradley · Accepted Answer · 2020-01-13T23:05:53

I had this issue. I am new to Ionic and React, so I don't really know if this issue is the same as mine, but I will let you know what I found. In my app I had a router setup in the app file that redirected /tabs to a page called mainTabs. The Tabs were actually setup in that mainTabs page. The problem was that in the router settings for redirecting traffic to the tabs page I had "exact={true}" set. This doesn't allow you to pass /tab/* as possibilities. When I took "exact={true}" off the route going to my tabs it fixed it.

Navigation problem in react with ionic framwork

1 Answers