I’m having an odd issue with const history = useHistory();, we are using history.replace('/foo/123/overview') to navigate to an IonPage, but using .replace() changes the url but the view stays the same. In this instance, the current app url is /foo/123/edit. When .push() is used the navigates fine but the path param isn’t picked up. Is there a “proper” way to navigate back whist passing data whether it be a path param or an object on state?
We’re attempting navigation on a valid form submission.
Note: All of our IonPage's are inside an IonRouterOutlet.
example below:
const history = useHistory();
const navigateToCustomer = (customer: any) => {
if(customer) {
if(isEditForm) {
history.replace(`/customer/${customer.customerNumber}/overview`);
}
}
}
const onFormSubmit = (event: FormEvent) => {
event.preventDefault();
if (submitValidation()) {
fetch(actionURL, requestOptions).then(response => {
response.json().then(data => {
if (response.status === 200) {
navigateToCustomer(data);
}
})
})
.catch(error => {
setFormSubmitting(false);
});
}
}
main-app.tsx
export const MyProject: FunctionComponent = () => {
const [{ user, isAuthenticated }, dispatch] = useReducer(authReducer, AuthContextInitState);
return (
<IonApp>
<AuthContext.Provider
value={{
isAuthenticated,
dispatch,
user
}}>
<IonReactRouter>
<IonRouterOutlet>
<Route path="/login">
{isAuthenticated ?
<Redirect to="/welcome"/>:
<Login />
}
</Route>
<ProtectedRoute path="/customer/create" component={AddCustomer} />
<ProtectedRoute path="/customer/:id/overview" component={CustomerProfile} />
<ProtectedRoute path="/customer/:id/edit" component={AddCustomer} />
<Route exact path="/">
{ isAuthenticated ? <Redirect to="/welcome" /> : <Redirect to="/login" /> }
</Route>
</IonRouterOutlet>
</IonReactRouter>
</AuthContext.Provider>
</IonApp>
);
}
