Search code examples
reactjsreact-routerreact-router-dom

Alternative for Prompt in React Router V6

What is the alternative for Prompt in React Router V6, has it been deprecated, and also hooks like usePrompt, useBlocker are also not available.

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

  • You can use this util (checked on 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

    Usage:

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

    ** Edit, Feb 2024: **

    Use react-router-prompt, availabe with react-router-dom >= 6.19