javascript - How to know if the URL has changed forward or backward in react(history)?

Question

I want to know if my components(more than 10 such components) are loaded via forward url/normal mount by click on button or by back(history.goback()) to add a CSS class(Different class required on forward and backward respectively). I have wrapped my components in a custom component , where i'm doing below :

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) {
        

        // Handle forward

      } else {
        

        // Handle backwards

      }
    }
  })
}, [ locationKeys, ])

But, my listener doesn't get called on url change. Any idea why or how do i achieve it ?

Answer 1

Just use useLocation:

const { action } = useHistory();
const { pathname } = useLocation();
useEffect(() => {
  // do something
}, [action, pathname]);