Navigation problem in react with ionic framwork - react-native

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;

Answer 1

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.