Ionic v5 (React w/ TypeScript): History .replace() Method Not Working as Expected

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

code example? I use replace pretty often with no problem

I’ve added coded example :slight_smile:

router code from App.tsx where the routes are defined and the code for the component that is supposed to be rendered, also are there any errors in the error logs?

I’ve add our main-app.tsx as a snippet above. There aren’t any errors in the console log and the address bar does update with the correct url but it seems like the component doesn’t load. The component the its supposed route back to is a bit bloated, is there in anything in particular you be looking for so I can trim it down a bit.

I had the same issue trying to use history.replace to navigate back with state, so I used history.push with a state object and set the navigation direction.

history.push("/customer", { customerNumber: customer.customerNumber, direction: 'back' });

You can then retrieve the state from the destination page

let customerNumber = props.location.state.customerNumber;
1 Like

Thank you for the response! I’ll give this a try. Also, I didn’t know at about the direction property so thanks for that bit of knowledge!