I have an app, and whenever users click on the back button I want ask: "You may have some unsaved changed. Are you sure to go back?". How can I achieve this react? Can I use react router dom for that? or is there any other method?
Asked
Active
Viewed 348 times
-1
-
1Does this help? https://stackoverflow.com/questions/25806608/how-to-detect-browser-back-button-event-cross-browser – Hanchen Jiang Dec 28 '21 at 17:15
-
What versions of `react-router` and `react-router-dom` are you using? From your project's directory run `npm list react-router-react-router-dom` and report back. – Drew Reese Dec 28 '21 at 17:49
-
Yes.. i will..its the lastest..maybe 5 – Nijesh Dec 28 '21 at 18:06
-
Well, current is v6 which removed any sort of `Prompt` component to block navigation actions, and doesn't directly expose out the `history` object to even do a `history.block`. Version 5 ***does*** however do this. The version you are using is a very relevant and important detail. – Drew Reese Dec 28 '21 at 18:28
1 Answers
0
Can you try using window.confirm?
<button
className="btn btn-danger"
onClick={() => {if(window.confirm('You may have some unsaved changed. Are you sure to go back?')){
//Your back button logic
}}
>
Back
</button>
Ahmet Firat Keler
- 2,603
- 2
- 11
- 22
-
Actually i want to block the browser's back button not a custom one in the app – Nijesh Dec 28 '21 at 18:08
-
Can you follow this link? https://stackoverflow.com/questions/36141470/disable-back-button-in-react-router-2 – Ahmet Firat Keler Dec 29 '21 at 05:02
-