/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

32 votes311 views6 answers
Font awesome react
Javascript React
0 vote325 views1 answer
Sort by string react
Javascript React
0 vote326 views1 answer
React-file-base64
Javascript React
0 vote276 views1 answer
Eslint version check in react
Javascript React
0 vote387 views1 answer
How to update state.item[1] in state using setState? React
Javascript React
0 vote344 views1 answer
My env.local file not working in my react app usind mac
Javascript React
16 votes307 views4 answers
Uuid react
Javascript React
15 votes318 views1 answer
Reducer in react example
Javascript React
1 vote270 views1 answer
Circle progress react
Javascript React
0 vote297 views1 answer
React i18n outside component
Javascript React