How to detect/handle back button press in React?

Question

I am trying to detect a user pressing the back button. I have a component that logs POP every time, even when the user did not press back button. I want to run this code only when the user navigated to the component from another screen. How do I do this?

const history = useHistory();
useEffect(() => {
    console.log(history.action)
    if (history.action == 'POP') {
        // process
}, [data])

https://stackoverflow.com/questions/41911309/how-to-listen-to-route-changes-in-react-router-v4 — Velu S Gautam, Jul 25 '20 at 11:28

score 1 · Answer 1 · answered Jul 25 '20 at 11:17

I am not quite sure what you're trying to accomplish here but I think you could use the return in useEffect to check when the user goes back. return runs when the component is unmounted.

const history = useHistory();
useEffect(() => {
    console.log(history.action)
    if (history.action == 'POP') {
        
        return function cleanup() {console.log("User pressed back")};
}, [data])

How to detect/handle back button press in React?

1 Answers1