如何监听导航组件中的片段更改？

import { useLocation, useEffect } from 'react';
import { useHistory } from 'react-router-dom';

const MyComponent = () => {
  const location = useLocation();
  const history = useHistory();

  useEffect(() => {
    const unlisten = history.listen((location) => {
      // 片段更改时的逻辑处理
      console.log('片段更改:', location.hash);
    });

    return () => {
      unlisten(); // 组件卸载时取消监听
    };
  }, [history]);

  return (
    // 组件内容
  );
};