2 years ago

#57328

test-img

Nico

Ionic6 React URL Query Params not getting removed

Im using Ionic6 React for my app. I have a overview page which queries data from the database and displays them in the ui. I added a button which redirects me to a 'add new entry' page. If the user saves the new entry im checking the inputs and insert the new entry into the database. If that went well im redirecting back to the overview page with a query param (success=true) to determine if i can display a 'success' toast or not.

'Add new entry'-page redirect:

if (await db_input()) {
      window.location.assign("/overview?success=true");
}

This brings me back to my overview page. Here im reading the query param and if success=true im showing a success toast (until now the code works as expected):

  useIonViewWillEnter( async () => {
    const params = new URLSearchParams(location.search);
    const queryParams = params.get(('success') || '');
    if (queryParams === 'true') {
      setSuccessToast(true);
      params.delete("success")
      history.replace({pathname: 'overview'})
    }
  });

After that the toast gets displayed as expected. But if i use my Ionic Tabbar to navigate to 'settings' and then go back to 'overwiev' the toast is visible again. It seems like the query params never get deleted and then get 'stuck' in the url history, which causes react router to redirect to /overview?success=true instead of /overview.

How can i correctly remove the query param?

typescript

ionic-framework

ionic-react

0 Answers

Your Answer

Accepted video resources