How Can We Constraint/restrict The User From Page Reloading Or Browser Back Or Forward Using Javascript

I have registration page, when user enters some details and click on refresh or back/forward button.Then we have to alert user with modal pop up like: 'Are you sure want to leave

Solution 1:

You can use prompt in react-router-dom, You may find at react-router-dom document https://reacttraining.com/react-router/core/api/Prompt

The object has a pathname attribute which is the next path by checking it you can figure out if the path is safe. Here is what I'm talking about:

<Prompt message={(params) => 
        params.pathname == '/about' ? "Move away?" : true } />

and also refer this https://codepen.io/anon/pen/XReabZ