fix: let a navigation back to the shown route cancel a pending one (#719)

Author: thelastbackspace

.changeset/quiet-links-return.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/router": patch
+---
+
+Fixes a link back to the shown route being ignored while a navigation to another route is pending.

src/routing.ts

@@ -612,8 +612,11 @@ export function createRouterContext(
       }
 
       const current = reference();
+      // While a navigation is pending, compare against where we are heading so
+      // that navigating back to the shown route still cancels the pending one
+      const target = lastTransitionTarget || { value: current, state: state() };
 
-      if (resolvedTo !== current || nextState !== state()) {
+      if (resolvedTo !== target.value || nextState !== target.state) {
         if (isServer) {
           const e = getRequestEvent();
           e && (e.response = { status: 302, headers: new Headers({ Location: resolvedTo }) });
@@ -638,14 +641,15 @@ export function createRouterContext(
 
   function navigateEnd(next: LocationChange) {
     const first = referrers[0];
-    if (first) {
+    // Ending up where the navigation started needs no new history entry
+    if (first && (next.value !== first.value || next.state !== first.state)) {
       setSource({
         ...next,
         replace: first.replace,
         scroll: first.scroll
       });
-      referrers.length = 0;
     }
+    referrers.length = 0;
   }
 
   function preloadRoute(url: URL, preloadData?: boolean) {

test/pending-navigation.spec.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+import { createResource, Suspense } from "solid-js";
+import { render } from "solid-js/web";
+import { MemoryRouter, Route, createMemoryHistory, useNavigate } from "../src/index.jsx";
+import type { Navigator } from "../src/types.js";
+
+const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+describe("pending navigation", () => {
+  test("navigating back to the shown route cancels a pending navigation", async () => {
+    let resolveSlow!: (value: string) => void;
+    const Slow = () => {
+      const [value] = createResource(() => new Promise<string>(resolve => (resolveSlow = resolve)));
+      return <span>Slow {value()}</span>;
+    };
+    let navigate!: Navigator;
+    const history = createMemoryHistory();
+    history.set({ value: "/a", scroll: false });
+    const root = document.createElement("div");
+    const dispose = render(
+      () => (
+        <MemoryRouter
+          history={history}
+          root={props => {
+            navigate = useNavigate();
+            return (
+              <>
+                <p id="location">{props.location.pathname}</p>
+                <Suspense fallback={<span>Loading</span>}>{props.children}</Suspense>
+              </>
+            );
+          }}
+        >
+          <Route path="/" component={() => <span>Home</span>} />
+          <Route path="/a" component={() => <span>Page A</span>} />
+          <Route path="/slow" component={Slow} />
+        </MemoryRouter>
+      ),
+      root
+    );
+
+    try {
+      await wait(10);
+      expect(root.textContent).toContain("Page A");
+      navigate("/slow");
+      await wait(10);
+      expect(root.textContent).toContain("Page A");
+      navigate("/a");
+      await wait(10);
+      resolveSlow("loaded");
+      await wait(25);
+      expect(history.get()).toBe("/a");
+      expect(root.querySelector("#location")?.textContent).toBe("/a");
+      expect(root.textContent).toContain("Page A");
+      expect(root.textContent).not.toContain("Slow");
+
+      // no duplicate /a entry was pushed
+      history.back();
+      await wait(10);
+      expect(history.get()).toBe("/");
+    } finally {
+      dispose();
+    }
+  });
+});