使用 React router v6 防止导航

Kas*_*ick 9 navigation react-router

如果用户离开表单页面,我想弹出一个模式,告诉他们如果离开,他们的更改将丢失,并且他们可以选择离开或取消。

我看到最近对 V6 beta 的更改取消了 Prompt、useBlocker 和 useHistory 的使用。我已经看到使用 onBeforeUnload 的答案,但这似乎只使用内置提示。

有没有办法使用 useNavigate 钩子来做到这一点?

小智 5

GitHub 上有一个类似的问题https://github.com/remix-run/react-router/issues/8139

一个可能的解决方案是使用UNSAFE_NavigationContext它公开block选项。请参阅https://github.com/remix-run/react-router/issues/8139#issuecomment-977790637

我对其进行了测试"react-router-dom": "^6.0.2",目前它可以[作为一种解决方法]。