/Javascript/React/Chrome back button click event react

Chrome back button click event react

If back react

import { useHistory } from 'react-router-dom'


const [ locationKeys, setLocationKeys ] = useState([])
const history = useHistory()

useEffect(() => {
  return history.listen(location => {
    if (history.action === 'PUSH') {
      setLocationKeys([ location.key ])
    }

    if (history.action === 'POP') {
      if (locationKeys[1] === location.key) {
        setLocationKeys(([ _, ...keys ]) => keys)

        // Handle forward event

      } else {
        setLocationKeys((keys) => [ location.key, ...keys ])

        // Handle back event

      }
    }
  })
}, [ locationKeys, ])

Source: stackoverflow.com

Chrome back button click event react

const {history} = useRouter();
  useEffect(() => {
    return () => {
      // && history.location.pathname === "any specific path")
      if (history.action === "POP") {
        history.replace(history.location.pathname, /* the new state */);
      }
    };
  }, [history])

Source: stackoverflow.com

Similar codes

0 vote364 views1 answer
React is not iterable
Javascript React
0 vote351 views1 answer
React native set variable key in loop
Javascript React
0 vote349 views1 answer
Added font to react native
Javascript React
48 votes381 views4 answers
How to add comment in react js
Javascript React
20 votes343 views2 answers
React localstorage
Javascript React
1 vote372 views1 answer
How prevent copy paste input react
Javascript React
1 vote365 views1 answer
React router dom 6 go back
Javascript React
2 votes404 views1 answer
Dynamic import in reactjs
Javascript React
22 votes383 views4 answers
Reactjs copytoclipboard box
Javascript React
0 vote369 views1 answer
Reactjs import electron
Javascript React