src/platform/StackedRouter.tsx

@@ -194,11 +194,13 @@ function animateOpen(element: HTMLElement) {
 function serializableStack(stack: readonly StackFrame[]) {
   const frames = unwrap(stack);
   return frames.map((fr) => {
-    return {
-      path: fr.path,
-      rootId: fr.rootId,
-      state: fr.state,
-    };
+    return fr.animateClose || fr.animateOpen
+      ? {
+          path: fr.path,
+          rootId: fr.rootId,
+          state: fr.state,
+        }
+      : fr;
   });
 }
 
@@ -258,11 +260,6 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
       }
     });
 
-  /* createEffect(() => {
-    const length = stack.length;
-    console.debug("stack is changed", length, unwrap(stack));
-  }); */
-
   createRenderEffect(() => {
     if (stack.length === 0) {
       pushFrame(window.location.pathname);
@@ -271,8 +268,12 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
 
   createRenderEffect(() => {
     makeEventListener(window, "popstate", (event) => {
-      if (event.state && stack.length !== event.state.length) {
+      if (!event.state) return;
+
+      if (stack.length === 0) {
         mutStack(event.state);
+      } else if (stack.length > event.state.length) {
+        popFrame(stack.length - event.state.length);
       }
     });
   });
@@ -358,10 +359,7 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
       reenterableAnimation.effect!.getComputedTiming();
     const totalTime = (delay || 0) + Number(activeDuration);
 
-    if (
-      Number(reenterableAnimation.currentTime) / totalTime >
-      0.1
-    ) {
+    if (Number(reenterableAnimation.currentTime) / totalTime > 0.1) {
       reenterableAnimation.addEventListener("finish", () => {
         onlyPopFrame(1);
       });