Alternative for history.listen(newLocation, action) in react-router-dom v6

[vinibretzke]

Hi All,

On my company we have a react application that is using really outdated libraries and react-router-dom is one of them (is running the v4 version of it). So the work to update all the libraries was assigned to me.

I need some help regarding the history.listen function that was removed on RRD v6. I know I can track locations by using useLocation(), turns out that I need to also track the action that the user is performing, for example the "POP" action (going backward on the page).

Currently (using v4) we are doing like this on componentDidMount:

history.listen((newLocation, action) => {
    if (action === "POP") {
         if (newLocation.pathname.indexOf("login") >= 0) {
              //this is if the user is authenticated and tries 
              // to go back to /login it will forward him to the page again. 
              history.go(1);
         } else {
              history.push(newLocation.pathname)
         }
    }
}) 

Turns out that I don't know how to handle that using react-router-dom v6, there is no place in docs that says something about the "POP" action.

Anyone has an idea how to handle that?
Thanks for the help

[kiliman]

If you're just trying to prevent the user from going back to the login page, you can update the login form to use replace. This will ensure that the login route is removed from the history stack.

<Form method="post" replace>

https://reactrouter.com/en/main/components/form#replace