useHistory().listen を使用してルーティングの変更を監視する

useHistory().listen を使用してルーティングの変更を監視する

React の関数コンポーネントを使用する場合、ルーティングの変更を監視し、ルーティングの変更時に特定の操作を実行したい場合があるため、これを使用してuseHistory().listen実現する必要があります。
使用方法は次のとおりです

const history = useHistory();
useEffect(() => {
    const unlisten = history.listen((historyLocation) => {
        cnosole.log(historyLocation)
    });
    return () => {
        unlisten();
    };
}, [history]);

useEffectここで、このメソッドは返されてアンインストールされる必要があることに注意してくださいlisten。以下の形式で書くと 

const history = useHistory();
useEffect(() => {
    history.listen((historyLocation) => {
        cnosole.log(historyLocation)
    });
}, [history]);

これによりlisten、メソッドは常にマウントされます。現在のコンポーネントが破壊されたり、ページがジャンプされた場合でも、このメソッドはルートの変更を常に監視します。ルートが変更されるたびに、内部のメソッドも実行されますcnosole.log。それ。