useBlocker可以用在第一页吗？

Question

我在 SPA 的第一页上有一个表单，它使用 React router v6，在特定情况下应该阻止后退导航。为了简化这一点，我们可以说，当在第一个呈现的页面上时，它必须始终阻止后退导航。

不幸的是，

useBlocker

不会阻止它：所有以下导航都会阻止后退导航，

useBlocker

被正确调用，但不是在第一个导航上。

尝试这个：

https://stackblitz.com/edit/github-58ojzsnc?file=README.md

这是预期的吗？我该如何解决这个问题？

Answer 1

我们可以说它必须始终阻止后退导航，当在第一个 渲染页面。

不幸的是，

useBlocker

并没有阻止它：以下所有内容 导航会挡住后面的导航，就是

useBlocker

叫做 正确，但不是在第一个。

这是预期的吗？

我相信这是设计/预期的行为。

useBlocker

功能描述是（强调是我的）：

useBlocker

允许应用程序阻止 SPA 内的导航并呈现 用户会看到一个确认对话框来确认导航。大多数使用 以避免使用半填充的表单数据。 这个不处理 硬重载或跨源导航。

这意味着如果用户进行硬页面重新加载或导航到/来自另一个域/源，导航操作将不会被阻止。

我该如何解决这个问题？

您可以实现自己的

beforeunload

^* 事件处理程序，该处理程序将处理页面重新加载和页面卸载，因为用户离开了您的域案例。

示例：

const [value, setValue] = React.useState('');

// Cache the current input value in a React ref
const valueRef = React.useRef(value);
React.useEffect(() => {
  valueRef.current = value;
}, [value]);

// Instantiate "beforeunload" event listener + callback
React.useEffect(() => {
  const handleBeforeUnload = (event: BeforeUnloadEvent) => {
    console.log('Running unload');
    if (valueRef.current) {
      event.preventDefault();
      event.returnValue = ''; // **
      return '';              // **
    }
  };

  window.addEventListener('beforeunload', handleBeforeUnload);

  return () => {
    window.removeEventListener('beforeunload', handleBeforeUnload);
  };
}, []);

_{^*注意：查看完整的beforeunload事件文档以获取完整的详细信息和注意事项。}

_{^**注意：您可以在此处返回字符串消息，并且某些浏览器可能“尊重”它并显示它，而不是现在标准化的消息。例如，Chrome 只显示“您所做的更改可能不会保存”。无论您返回/指定什么，都会在确认对话框中显示。}