Navigate Programmatically Ionic-React

Question

I'm working with React and Ionic, after a form submission, I want to navigate programmatically to the next route,

When I do:

const { navigate } = useContext(NavContext);
// After Async call....
navigate("/", "forward", "pop").

it works.

While I was going through ionic-react documentation here: https://ionicframework.com/docs/react/navigation#navigation I saw that they used history to navigate programmatically, and it says note: history is a prop.

I tried the above statement, and I get: Property 'history' does not exist on type '{ children?: ReactNode; }'.

an explanation is needed.

App.tsx

<IonRouterOutlet>
     <Route exact path="/" component={Dashboard} />
     <Route path="/home" component={Home} exact={true} />
     <Route path="/login" component={Login} />
     <Route path="/signup" component={Signup} />
</IonRouterOutlet>

if i take history as prop, it gives the above error, if i import history from react-router-dom, i think it should work — AbdulAzeez Olanrewaju

Unknown Unknown · Accepted Answer · 2021-01-29T12:12:51

Sample code for conditionally navigate.In case any problem let me know

import { useHistory } from 'react-router-dom';

const Form = () => {
const history = useHistory();

return(
<div>
if(condition){
history.push("/example")
}

</div>
)}

Navigate Programmatically Ionic-React

1 Answers