javascript - React Router 链接重新加载页面 : Conflict with external event

Question

我正在使用 React Router 的 Link 组件来处理我的应用程序中的页面转换。
我的应用程序包含在一个外部网页中，该网页有一些脚本(即 Google 跟踪代码管理器)，用于定义文档级别链接上的事件。
这会导致与链接事件发生冲突:单击链接时页面总是重新加载。
我试图通过 onClick 回调停止在我的 Link 组件上传播，但没有成功:<Link onClick={(e) => { e.stopPropagation(); }} [...]>...</Link>我看到链接事件也是在文档级别定义的，所以我不知道如何停止外部事件。
关于这个有任何线索吗？
谢谢 !

Answer 1

更新:如果不将整个应用程序呈现在 iframe 中，似乎没有简单的方法可以做到这一点。 .
如果您不介意这样做，那很容易(取自 How to set iframe content of a react component ):

const Frame = ({ children }) => {
    const [ref, setRef] = useState(null)
    const mountNode = ref?.contentWindow.document.body

    return (
        <iframe title="iframe" ref={setRef}>
            {mountNode && ReactDOM.createPortal(children, mountNode)}
        </iframe>
    )
}

然后，将您的主应用程序包装为 Frame 的子应用程序零件。 iframe 内的点击次数不会冒泡到父窗口，详见 Capture click on div surrounding an iframe .
这是 CodeSandbox demo显示这种方法。

下面的原始(无效)答案
在您的 App 上或 Router零件:

const blockClicks = useCallback((e) => {
    const { target } = e
    const { nodeName, href } = target
    if (
        target.closest('#root-id') &&
        nodeName === 'A' &&
        href &&
        (/^https?:\/\//.test(!href) ||
        href.startsWith(window.location.origin)
    )) {
        // amend logic specific to your use case
        // - we want to avoid blocking irrelevant clicks
        e.stopPropagation()
    }
})

useEffect(() => {
    document.addEventListener('click', blockClicks, true)

    return () =>
        document.removeEventListener('click', blockClicks, true)
})