In this article I will explain with an example, how to disable
Browser Back Button after Logout using
ReactJS.
Disabling Browser Back Button will prevent user from navigate to previous page after Logout using Back Button of the browser or the back option in the context menu.
One cannot disable the Browser Back Button functionality only thing that can be done is prevent them going back.
Disable Browser Back Button using ReactJS
HTML Markup
The following script files must be placed inside the Page where you want to prevent the User from coming back using Browser Back Button.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.development.js"></script>
<script src="Scripts/ReactJS.jsx"></script>
ReactJS JSX file
For example, consider two pages, Logout and Home and once User lands on the Logout page, you would not want him to go to Home page. Thus, the following script must be placed inside the Home page.
Inside the preventBack function, the window.history.forward() method is called which navigates the browser forward one step in their history. Whenever Browser Back Button is clicked, this function immediately moves it one step forward.
The setTimeout method schedules the execution time of the preventBack function with delay of 0 (zero) milliseconds.
Finally, the window.onunload function returns NULL.
class ReactJS extends React.Component {
preventBack(e) {
window.history.forward();
}
componentDidMount() {
setTimeout(this.preventBack, 0);
window.addEventListener("unload", function () {
null;
});
}
}
ReactJS JSX file
Inside this
ReactJS class, an HTML Anchor element is returned which is rendered using the
ReactDOM.render function in an HTML DIV.
class ReactJS extends React.Component {
preventBack(e) {
window.history.forward();
}
componentDidMount() {
setTimeout(this.preventBack, 0);
window.addEventListener("unload", function () {
null;
});
}
render() {
return (<a href="Logout.html">Logout</a>);
}
}
ReactDOM.render(
<ReactJS/>,
document.getElementById('dvMessage')
);
Disabling Browser Back Button after Logout using ReactJS
For illustration purposes, two Pages are used Home and Logout. After logging out User is sent to Logout page and using Browser Back Button he will be prevented from going back to Home page from Logout page.
Home Page
The HTML Markup consists of following element:
div – For displaying message returned from the
ReactJS script.
Then, the following script files for
ReactJS application are inherited.
1. react.development.js
2. react-dom.development.js
Finally, the ReactJS.jsx file is inherited.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Home</title>
</head>
<body>
<form id="form1" runat="server">
<h3>Home</h3>
<hr />
<div id="dvMessage"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.development.js"></script>
<script src="Scripts/ReactJS.jsx"></script>
</form>
</body>
</html>
Logout Page
The HTML Markup of Logout page consists of an H3 tag for displaying message.
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Logout</title>
</head>
<body>
<h3>Logout</h3>
</body>
</html>
Screenshot
![ReactJS: Disable Browser Back Button after Logout in ASP.Net]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
