reactjs - 为什么 useEffect 不能在 window.location.pathname 更改时运行？

Question

为什么使用效果不能在 window.location.pathname 上运行变化？我得到 loc只记录一次。

我怎样才能运行使用效果当路径名更改而没有任何其他库时？

  useEffect(() => {
    const loc = window.location.pathname
    console.log({ loc })
  }, [window.location.pathname])

Answer 1

创建一个钩子(Hook)，例如:

const useReactPath = () => {
  const [path, setPath] = React.useState(window.location.pathname);
  const listenToPopstate = () => {
    const winPath = window.location.pathname;
    setPath(winPath);
  };
  React.useEffect(() => {
    window.addEventListener("popstate", listenToPopstate);
    return () => {
      window.removeEventListener("popstate", listenToPopstate);
    };
  }, []);
  return path;
};

然后在您的组件中像这样使用它:

const path = useReactPath();
React.useEffect(() => {
  // do something when path changes ...
}, [path]);

当然，您必须在顶级组件中执行此操作。