How Do I Disable The Browser Back Button In React JS?

Asked 9 months ago
Answer 1
Viewed 594
1

In this article, we will examine how to compose a javascript capability which will forestall the client to explore back to the last or past page. There are such countless ways of halting the program back button generally famous and will work in all circumstances. You can add code to the first or past page to drive the program to go advances over and over so when the client attempts to back to the past page the program will take him in the future in the equivalent.

This should be possible by making custom capabilities like this:

Example 1:

Code 1: Save this record as Login.html for the principal page.

<!DOCTYPE html>

<html>

      

<head>

    <title>

        Blocking Back Button

        using javascript

    </title>

      

    <style type="text/css">

        body {

            font-family:Arial;

            color:green;

        }

    </style>

      

    <script type="text/javascript">

        window.history.forward();

        function noBack() {

            window.history.forward();

        }

    </script>

</head>

  

<body>

    <h1>GeeksforGeeks</h2>

      

    <p>

        Click here to Goto 

        <a href="b.html">

            Link to second page

        </a>

    </p>

</body>

  

</html>

Code 2: Save this record as b.html for the subsequent page.


<!DOCTYPE html>
<html>
      
<head>
    <title>
        Blocking Back Button
        using javascript
    </title>
</head>
  
<body>
     <h3>This is second page</h3>
       
     <p>
         On this page, back button
         functionality is disabled.
     </p>
</body>
  
</html>

Example 2:

!DOCTYPE html>
<html>
      
<head>
    <title>First Page</title>
      
    <script type="text/javascript">
        function preventBack() {
            window.history.forward(); 
        }
          
        setTimeout("preventBack()", 0);
          
        window.onunload = function () { null };
    </script>
</head>
  
<body>
    <h3>This is first page</h3>
    <hr />
    <a href = "b.html">Goto second Page</a>
</body>
  
</html>

Code 2: Save this document as b.html for the subsequent page.

<!DOCTYPE html>
<html>
      
<head>
    <title>Second Page</title>
</head>
  
<body>
    <h3>
        Second Page - Back Button
        is disabled here.
    </h3>
    <hr />
</body>
  
</html>

 

 

Answered 9 months ago White Clover Markets