How to control address bar change and back and forth actions in browser?

Question

Have a nice day, everyone!

I have a problem. I have an application written in React/TypeScript using Redux and react router . There is a table in which the user can make changes. But if the user wants to save the changes, then he definitely needs to click the "Save" button. I want to help the user and warn him if he wants to leave the page without saving. I need so that when the user tries to close the browser tab, do back or forward in the browser tab, refresh the browser tab or insert a new address in the address bar and follow it - I could block this action and warn the user that the data was not saved.

onbeforeunload - does not fit my application. This does not work correctly in React. And besides, I also need to control the change in the address bar and the movement back and forth

I understand that this is an outdated approach in terms of comfort and security and that modern browsers do not allow you to do this (as I understand it), but I want to clarify - is this realistic to do and if so, how? And what would you better advise me to do in such a situation and how to warn the user then?

P.S. I can not make changes to be saved without the "Save" button on the entire table. Then the server may crash.