fix(flat-web): blocking browser fallback (#857)

* fix(login): replace history instead of push

close #856

* correct comment

web/flat-web/src/pages/HomePage/index.tsx

@@ -5,13 +5,13 @@ import { observer } from "mobx-react-lite";
 import { MainRoomMenu } from "./MainRoomMenu";
 import { MainRoomListPanel } from "./MainRoomListPanel";
 import { MainRoomHistoryPanel } from "./MainRoomHistoryPanel";
-import { RouteNameType, usePushHistory } from "../../utils/routes";
+import { RouteNameType, useReplaceHistory } from "../../utils/routes";
 import { GlobalStoreContext, PageStoreContext } from "../../components/StoreProvider";
 import { loginCheck } from "../../apiMiddleware/flatServer";
 import { errorTips } from "../../components/Tips/ErrorTips";
 
 export const HomePage = observer(function HomePage() {
-    const pushHistory = usePushHistory();
+    const replaceHistory = useReplaceHistory();
     const globalStore = useContext(GlobalStoreContext);
     const pageStore = useContext(PageStoreContext);
     const [isLogin, setIsLogin] = useState(false);
@@ -51,7 +51,7 @@ export const HomePage = observer(function HomePage() {
                 if (isLoggedIn) {
                     setIsLogin(true);
                 } else {
-                    pushHistory(RouteNameType.LoginPage);
+                    replaceHistory(RouteNameType.LoginPage);
                 }
             }
         });

web/flat-web/src/utils/routes.ts

@@ -56,3 +56,22 @@ export function usePushHistory(): <T extends RouteNameType>(
 
     return pushHistory;
 }
+
+/**
+ * Replace history with Flat route
+ */
+export function useReplaceHistory(): <T extends RouteNameType>(
+    name: T,
+    params?: RouteParams<T>,
+) => void {
+    const history = useHistory();
+
+    const pushHistory = useCallback(
+        (name: RouteNameType, params: RouteParams<RouteNameType> = {}) => {
+            history.replace(generateRoutePath(name, params));
+        },
+        [history],
+    );
+
+    return pushHistory;
+}