React Router v6 - Push & Pop state action

user_8311792 0
Viewed 592

In the latest react-router v6, useHistory() hook has been replaced by useNavigate(), well what I wanted is, I want to get the action object to know, it was 'Push' or 'Pop' state, useHistory had this object, but in latest v6, I couldn't find where I can get this object can anyone guide me please, I'm working on page animation i need this action state to define the animation seamlessly.

Thanks in advance!

react-router-dom react-router react-hooks reactjs
1 Answers

See useNavigationType.

TypeScript example:

import { Action } from 'history';
import { NavigationType, useNavigationType } from 'react-router-dom';
// ... other imports

const MyComponent = () => {
  const navType: NavigationType = useNavigationType();

  useEffect(() => {
    console.log(navType);
    if (navType === Action.Pop) {
      // DO SOMETHING HERE
    }
  }, [navType]);

  return (
    <div>my UI</div>
  );
};
user_858820
Related