使用react-router-dom v6进行路由在SPA中预先检测路由变化

Question

我正在构建SPA应用程序。我有一个带有表单更改的组件，可以保存或取消这些更改，具体取决于用户按下的按钮。我有一个标志，表明在此表单中进行了一些更改。

我正在使用

react-router-dom

v6 进行这样的路由：

<Routes>
  <Route />
  <Route />
  <Route />
</Routes>

我想在用户有“未保存的更改”并尝试导航到“另一个页面”（另一条路线）时向用户显示警告。在我看来，没有这样的机制，我也仍然无法编写纯js脚本来解决这个问题。 beforeunload 对我不起作用，因为它仅在页面刷新时触发。 有什么办法可以实现这个目标吗？

React-router 有一个名为

Prompt

Answer 1

import { Prompt } from 'react-router'

const MyComponent = () => (
  <>
    <Prompt
      when={shouldBlockNavigation}
      message='You have unsaved changes, are you sure you want to leave?'
    />
    {/* Component JSX */}
  </>
)

这将阻止任何导航，但不会阻止页面重新加载或关闭。当用户重新加载或关闭页面时也显示消息：

componentDidUpdate = () => {
  if (shouldBlockNavigation) {
    window.onbeforeunload = () => true
  } else {
    window.onbeforeunload = undefined
  }
}