CODEWITHSUNDEEP
javascriptreactjsreact-router
tedGuy
tedGuy

Reputation: 391

How to disable or prevent going back form browser back button in react-router-dom v6

I'm using react-router-dom v6, and I've seen other people's questions, but they're not helpful to me; all I want is to make going back to any point impossible.

const App = () => {
  const user = useSelector((state) => state.user.userData);
  /* Destructuring the state of auth from the redux store. */
  const { isLogged, isVerified, resetPasswordSent, resetPasswordVerified } =
    useSelector((state) => state.auth);

  const Check = () => {
    if (user?.firstTimeAccess === true) {
      return <SetProfile />;
    } else if (user?.firstTimeAccess === false) {
      return <Navigate to="/home" />;
    }
  };

  return (
    <Router>
      <Routes>
        <Route path="/" element={isLogged ? <Check /> : <Landing />} />
        <Route
          path="/login"
          element={!isLogged ? <Login /> : <Navigate to="/home" />}
        />
        <Route
          path="/register"
          element={!isLogged ? <Register /> : <Navigate to="/home" />}
        />
        <Route
          path="/home"
          element={isLogged ? <Home /> : <Navigate to="/login" />}
        >
          <Route path="dashboard" element={<Dashboard />} />
          <Route path="chat" element={<Chat />} />
        </Route>

        <Route
          path="/join"
          element={meetingStarted ? <MeetingRoom /> : <Navigate to="/home" />}
        />
        <Route
          path="/verify_account"
          element={!isVerified ? <Navigate to="/" /> : <VerifyAccount />}
        />
        <Route
          path="/auth/:authService/:socketId"
          element={<DesktopClientOauth />}
        />
        <Route path="auth/successful" element={<OauthSuccessfulPage />} />

        <Route
          path="/password_reset"
          element={!isLogged ? <ForgotPassword /> : <Navigate to="/home" />}
        />
        <Route
          path="/password_reset/verify_reset_code"
          element={
            resetPasswordSent ? <ResetPassword /> : <Navigate to="/home" />
          }
        />

        <Route
          path="/password_reset/new_password"
          element={
            resetPasswordVerified ? <NewPassword /> : <Navigate to="/home" />
          }
        />

        <Route path="*" element={<Navigate to="/" />} />
      </Routes>
    </Router>
  );
};

Upvotes: 7

Views: 14350

Answers (1)

Drew Reese
Drew Reese

Reputation: 202751

You can't, or shouldn't, block or modify the browser's back button default behavior, but you can control navigation actions within your app. If you want to control back navigation actions within your app to prevent navigating back to a page you should basically not navigate forward and populate the history stack to make entries to navigate back to. In other words, use redirects instead of navigates, i.e. REPLACE actions instead of PUSH actions.

  • Declarative navigation using Navigate component and the replace prop

    <Navigate to="...." replace />

  • Declarative navigation using Link component and the replace prop

    <Link to="...." replace>.....</Link>

  • Imperative navigation using navigate function and the replace option

    const navigate = useNavigate();

...

navigate("....", { replace: true });

Upvotes: 12

Related Questions