Redirect to previous component on button click (React Routing)

Tags: , , ,



I have a react component that renders when i click on a menu option, this page has a form to complete and that’s done, onSubmit i want to redirect it to the component that the user clicked before.

I tried to redirect it with Redirect and also using useHistory(), but none of them are working, this is what i did with useHistory():

The current url is localhost/home/schemes/firstoption and i want to fo back to localhost/home/firstoption.

Scheme.js:

  let history = useHistory();


<Button
                className="button-dc btn-block top30"
                variant="primary"
                type="submit"
                disabled={enableButton}
              >
                Finish
              </Button>
const onSubmit = async (event) => {
    event.preventDefault();
    event.stopPropagation();
    {...}
    history.push(previousURL);
  };
  const URL = window.location.href;
  const previousURL = URL.split("scheme/").join("");
  previousURL // localhost/home/firstoption

This creates this URL but doesn’t redirect:

https://localhost/home/scheme/https://localhost/home/firstoption

And i also tried to do the same thing but instead of using

history.push(previousURL);

I used this:

return <Redirect to={previousURL} />

And this doesn’t create the URL and doesn’t redirect either.

Does anyone see any error on this?

Answer

I couldn’t make any of the suggested options work, so i ended up doing this:

window.history.pushState({}, null, previousURL); // previousURL = localhost/home/firstoption
location.reload();

I hope this also helps someone else!



Source: stackoverflow