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>
  );
};

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>
  );
};

• javascript
• reactjs
• react-router

• With replace, like this <Navigate to="/your-path" replace />; – Mile Mijatović Commented Aug 10, 2022 at 17:52

1 Answer 1

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 ponent and the replace prop

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

• Declarative navigation using Link ponent and the replace prop

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

• Imperative navigation using navigate function and the replace option

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