你想要的效果是“当位置改变时更新我的​​状态”，这在useEffect代码中翻译如下：

  useEffect(() => {
    detectHome();
    return () => {
      detectHome();
    };
  }, [location]);

如果您使用的是 react-router，您可以在 useEffect 中订阅位置更改事件：

import {browserHistory} from 'react-router';

...
useEffect(() => {
  return browserHistory.listen(detectHome);
}, []);
...

这将订阅您的detectHome功能以在安装时更改位置并在卸载时取消订阅。

我认为如果您GlobalProvider用作根组件，在这种情况下，它只会渲染一次，除非状态或props发生变化。所以一些解释：

  useEffect(() => {
    detectHome();
    return () => {
      detectHome();
    };
  }, [state.isHome]);

上面这段代码， thestate只被 this 更新useEffect，所以它只在第一次渲染后更新一次状态，并且detectHomereturn的内部useEffect只在其他更新发生或state.isHome第一次不同时才执行。这个解释有点令人困惑，但就是这样。

但解决方案是使用窗口的“popstate”事件：

export const GlobalProvider = ({ children, location }) => {


const prevScrollY = useRef(0);
  const [state, setState] = useState({
    isHome: location.pathname === '/',
    // other states
  });

  const detectHome = () => {
    const homePath = location.pathname === '/';
    if (!homePath) {
      setState(prevState => ({
        ...prevState,
        isHome: false
      }));
    }
    if (homePath) {
      setState(prevState => ({
        ...prevState,
        isHome: true
      }));
    }
  };

  useEffect(() => {
    window.addEventListener('popstate', detectHome)
    return () => {
      window.removeEventListener('popstate', detectHome)
    };
  }, [state.isHome]);

  return (
    <GlobalConsumer.Provider
      value={{
        dataContext: state,
      }}
    >
      {children}
    </GlobalConsumer.Provider>
  );
};

我认为 Gatsby 应该操纵历史记录，所以这会触发popstate浏览器，并且您可以检测到 url 的变化。