如何在react-router-dom v6中禁用或防止从浏览器后退按钮返回

Question

我使用的是react-router-domv6，我看过其他人的问题，但对我没有帮助；我想要的只是让回到任何一点变得不可能。

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

Answer 1

您不能或不应该阻止或修改浏览器的后退按钮默认行为，但您可以控制应用程序内的导航操作。如果您想控制应用程序中的后退导航操作以防止导航回页面，则基本上不应向前导航并填充历史记录堆栈以创建要导航回的条目。换句话说，使用重定向而不是导航，即使用REPLACE操作而不是PUSH操作。

• 使用Navigate组件和replaceprop进行声明式导航

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

• 使用Link组件和replaceprop进行声明式导航

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

• 命令式导航使用navigate功能和replace选项

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