javascript - 单击链接/按钮导航到其他路线时，ClickAwayListener 不会触发

Question

我将 Material-UI ClickAwayListener 组件与使用 react-router 的现有代码一起使用。该按钮位于 <ClickAwayListener> ... </ClickAwayListener> 之外所以我期待 onClickAway在导航到其他路线之前开火。但它没有
下面是我的代码的复制，在某种程度上说明我的意思

function Component(){

  const handleClickAway = () => {
    // Do something here
  }

  return (
  <>
    <button>
      <Link to="/other-route">Click here </Link>
    </button>
    // Some other element here
    <ClickAwayListener onClickAway={handleClickAway}>
      <div>
        // Content
      </div>
    </ClickAwayListener>
  </>
  )
}

因此，如果我单击 <ClickAwayListener> 之外的任何位置和 <button> handleClickAway被解雇了，但如果我点击 <button>其中包含与它没有的其他路线类似的内容。
我试图查看 ClickAwayListener 的源代码这个 part ，我相信，负责检测点击

 React.useEffect(() => {
    if (mouseEvent !== false) {
      const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
      const doc = ownerDocument(nodeRef.current);

      doc.addEventListener(mappedMouseEvent, handleClickAway);

      return () => {
        doc.removeEventListener(mappedMouseEvent, handleClickAway);
      };
    }

    return undefined;
  }, [handleClickAway, mouseEvent]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

据我所知，这部分将首先在组件安装/重新渲染时添加一个事件监听器来单击事件，并在组件卸载之前删除该监听器( useEffect() 的默认行为)。但如果是这种情况，那么在组件被任何涉及点击 ClickAwayListener 区域之外的事件卸载之前, onClickAway监听器应该被触发，因为监听器仍然附加到点击事件。
所以简而言之，这是我期望的行为:
按钮点击 --> onClickAway fire --> 组件卸载 --> 进入新路径 --> 清理 useEffect() 的代码 run --> 监听器被移除
但这就是迄今为止发生的事情
按钮单击 --> 组件获取 umount --> 转到新路由 --> 清理 useEffect() 运行的代码 --> 监听器被移除
有人可以帮我解释为什么会这样吗？

Answer 1

ClickAwayListener组件通过将事件监听器附加到 document 来工作。 ，当鼠标事件触发时，它会触发 onClickAway仅当鼠标事件不在元素内时。
Link 来自 react-router-dom 的组件基本上呈现如下内容:

<a onClick={() => navigate()}>click</a>

当您点击链接并调用 navigate() , React 卸载当前组件并在下一帧中安装下一页组件。但问题是， document仅处理处理程序 下次重新渲染后 ，此时，来自 ClickAwayListener 的事件处理程序自从它被卸载后就已经被删除了，所以什么都没有被调用。
这个问题可以通过等到下一次重新渲染之后，当来自 document 的处理程序来解决。已被调用。

<button
  onClick={() => {
    setTimeout(() => {
      history.push("/2");
    });
  }}
>

现场演示