I do not want a user to click browser back button and forward button from my page because my page loads stored sessions every time. If user is clicking on these buttons then i simply want him to navigate to the homepage.

For security purpose, sessions are being maintained by the backend APIs so if user will fluctuate on browser's forward and back buttons then it will cause session disruption.

I have searched everywhere and tried lots of things but no solution is patible with the v6 of react-router-dom. There must be solution for this. Please help me out in getting the same.

I do not want a user to click browser back button and forward button from my page because my page loads stored sessions every time. If user is clicking on these buttons then i simply want him to navigate to the homepage.

For security purpose, sessions are being maintained by the backend APIs so if user will fluctuate on browser's forward and back buttons then it will cause session disruption.

I have searched everywhere and tried lots of things but no solution is patible with the v6 of react-router-dom. There must be solution for this. Please help me out in getting the same.

• javascript
• reactjs
• react-hooks
• react-router
• react-router-dom

Share Improve this question Follow edited Sep 7, 2022 at 5:31 Anshul asked Sep 6, 2022 at 5:48 AnshulAnshul 8122 silver badges1010 bronze badges 3

• 2 does this answer your question ? stackoverflow./questions/71369320/…, – Alpha Commented Sep 6, 2022 at 5:55
• No it doesn't help out in any way. – Anshul Commented Sep 6, 2022 at 6:02
• I just don't want that user is able to click on browser forward and back button and if he does so, then i will simply just forward him to the homepage. – Anshul Commented Sep 7, 2022 at 5:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

this was my question recently. I searched a lot but have nothing found to do this work with react-router v6. but you can handle browser back and forward buttons using window 'popstate' event. I wrote a hook for connecting, detect and handle this event(useBackButton):

import { useEffect, useState } from "react";

const useBackButton = (callback) => {
  const [isBack, setIsBack] = useState(false);

  const handleEvent = () => {
    setIsBack(true);
    callback();
    window.history.go(1);
  };

  useEffect(() => {
    window.addEventListener("popstate", handleEvent);
    return () => window.removeEventListener("popstate", handleEvent);
  });

  return isBack;
};

export default useBackButton;

you can write your function that does your desired work and send it to this hook. then call this hook in every ponent that you want.

There is an API for back and forward in React Router Dom v6:

import { useNavigate } from "react-router-dom";

export const App = () => {
  const navigate = useNavigate();
  const handleClickHome = () => {
    navigate("/home");
  }
  const handleClickBack = () => {
    navigate(-1);
  }
  const handleClickForward = () => {
    navigate(1);
  }
  return (
    <div>
      <button onClick={handleClickHome}>Go Home</button>
      <button onClick={handleClickBack}>Go Back</button>
      <button onClick={handleClickForward}>Go Forward</button>
    </div>
  );
}