React router v6 doesn't support or usePrompt

Question

Migrating a codebase to react-router v6 specifically v6.2.1 and running into some issues when trying to use <Prompt /> component or usePrompt, turns out they are not available in this version of react-router. Or am I wrong? If anyone have run in to the same issue or if you know a way around this issue, your help would be appreciated.

It's not currently included, though I believe there are plans to reintroduce them later. — Drew Reese, Jan 07 '22 at 05:54
check this: https://stackoverflow.com/questions/62792342/in-react-router-v6-how-to-check-form-is-dirty-before-leaving-page-route — Kais, Jan 07 '22 at 05:57

score 10 · Accepted Answer · answered Jan 07 '22 at 05:58

10

Prompt is currently not supported in v6

You will have to create your own component that performs the check and displays the prompt.

answered Jan 07 '22 at 05:58

Josh Ackland

603
4
19

1

yup seems like there is no way around it for now, except implementing our own logic – Abdulhamid Jan 07 '22 at 06:18
2

yeah, still not included in v6.4.3 – nerdess Nov 25 '22 at 10:17
Prompt implementation using useBlocker: https://stackoverflow.com/a/75920683/2767413 – o.z Apr 03 '23 at 14:47

score 5 · Answer 2 · answered Feb 15 '22 at 18:45

As it says in the documentation:

<Prompt> from v5 (along with usePrompt and useBlocker from the v6 betas) are not included in the current released version of v6. We decided we'd rather ship with what we have than take even more time to nail down a feature that isn't fully baked. We will absolutely be working on adding this back in to v6 at some point in the near future, but not for our first stable release of 6.x.

So you have two options:

Create your own component and handle the logic there.
Downgrade react-router-dom to v5.

Source: https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported

score 0 · Answer 3 · answered Jul 05 '23 at 00:42

React router v6 doesn't support or usePrompt.

You can use this simple hook to block navigation based on certain state changes or criteria.

Usage

import { useState } from 'react';
import useNavigationPrompt from 'use-navigation-prompt';
    
function App() {
    const [isNavigationBlocked, setIsNavigationBlocked] = useState(false);
    useNavigationPrompt(isNavigationBlocked);
    
    return (
        <div>
            Navigation is: { !isNavigationBlocked ? "not" : "" } Blocked
            <button 
                onClick={() => setIsNavigationBlocked(prevIsNavigationBlocked => !prevIsNavigationBlocked)}
            >
                Toggle
            </button>
        </div>
    );
}
    
export default App;

score 0 · Answer 4 · answered Jul 11 '23 at 17:45

You can use the beta supported unstable_usePrompt:


import { unstable_usePrompt } from 'react-router-dom';

unstable_usePrompt({
  message: "Are you sure you want to leave?",
  when: true
})

And here is a full example of <Prompt /> in react router v6 using unstable_useBlocker that has all the features

score -5 · Answer 5 · answered May 29 '22 at 23:19

-5

Prompt is currently not supported in react-router-dom 6

Prompt not supported at the moment

Resort to the following:

Writing your own prompt component
installing react-router-dom 5 and using prompt.

answered May 29 '22 at 23:19

Promise Ihunna

293
3
8

Sorry, but your answer does not add anything to the previous one. Just vote up for the previous one. – Will59 Sep 21 '22 at 14:34
1

Yes, I had not seen the ones above until now. Thanks. – Promise Ihunna Sep 21 '22 at 17:00

React router v6 doesn't support or usePrompt

5 Answers5

Usage