React Router V6 中提示的替代方案

Question

React Router V6 中的替代方案是什么Prompt？它是否已被弃用，并且像usePrompt,这样的钩子useBlocker也不可用。

<Prompt message="Are you sure you want to leave?" />

Answer 1

您可以使用此实用程序（在react-router-dom v6.9上检查）：

import { unstable_useBlocker as useBlocker } from 'react-router-dom'

function Prompt({ when, message }) {
    useBlocker(() => {
        if (when) {
            return ! window.confirm(message)
        }
        return false
    }, [when])

  return <div key={when} />
}

export default Prompt

用法：

<Prompt when={condition} message='Are you sure you want to leave?'/>

**编辑，2024 年 2 月： **

使用react-router-prompt，可与react-router-dom >= 6.19一起使用