@solidjs/router 0.16.1 → 0.16.3

package/dist/components.jsx

@@ -18,8 +18,9 @@ export function A(props) {
         const to_ = to();
         if (to_ === undefined)
             return [false, false];
-        const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
-        const loc = decodeURI(normalizePath(location.pathname).toLowerCase());
+        // trailing slashes are ignored so `/route` and `/route/` share active state
+        const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase().replace(/\/$/, "");
+        const loc = decodeURI(normalizePath(location.pathname).toLowerCase().replace(/\/$/, ""));
         return [props.end ? path === loc : loc.startsWith(path + "/") || loc === path, path === loc];
     });
     return (<a {...rest} href={href() || props.href} state={JSON.stringify(props.state)} classList={{

package/dist/data/action.js

@@ -24,7 +24,7 @@ export function useSubmission(fn, filter) {
     const submissions = useSubmissions(fn, filter);
     return new Proxy({}, {
         get(_, property) {
-            if ((submissions.length === 0 && property === "clear") || property === "retry")
+            if (submissions.length === 0 && (property === "clear" || property === "retry"))
                 return () => { };
             return submissions[submissions.length - 1]?.[property];
         }
@@ -118,7 +118,10 @@ function toAction(fn, url) {
     fn.url = url;
     if (!isServer) {
         actions.set(url, fn);
-        getOwner() && onCleanup(() => actions.delete(url));
+        // Only remove the registration if it still belongs to this instance —
+        // a re-created action (e.g. a new `.with()` binding after revalidation)
+        // may have registered itself under the same URL since.
+        getOwner() && onCleanup(() => actions.get(url) === fn && actions.delete(url));
     }
     return fn;
 }

package/dist/data/query.js

@@ -28,12 +28,12 @@ function getCache() {
  * Revalidates the given cache entry/entries.
  */
 export function revalidate(key, force = true) {
+    const now = Date.now();
+    // force the cache miss synchronously so a `refetch` in the same tick sees it —
+    // startTransition defers its callback to a microtask (#497)
+    force && cacheKeyOp(key, entry => (entry[0] = 0));
     return startTransition(() => {
-        const now = Date.now();
-        cacheKeyOp(key, entry => {
-            force && (entry[0] = 0); //force cache miss
-            entry[4][1](now); // retrigger live signals
-        });
+        cacheKeyOp(key, entry => entry[4][1](now)); // retrigger live signals
     });
 }
 export function cacheKeyOp(key, fn) {

package/dist/index.js

@@ -1,5 +1,5 @@
 import { isServer, getRequestEvent, createComponent as createComponent$1, memo, delegateEvents, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
-import { getOwner, runWithOwner, createMemo, createContext, onCleanup, useContext, untrack, createSignal, createRenderEffect, on, startTransition, resetErrorBoundaries, batch, createComponent, children, mergeProps, Show, createRoot, sharedConfig, getListener, $TRACK, splitProps, createResource, catchError } from 'solid-js';
+import { getOwner, runWithOwner, createMemo, createContext, onCleanup, useContext, untrack, createSignal, createRenderEffect, on, startTransition, resetErrorBoundaries, batch, createComponent, children, mergeProps, Show, createRoot, sharedConfig, getListener, $TRACK, createEffect, splitProps, createResource, catchError } from 'solid-js';
 import { createStore, reconcile, unwrap } from 'solid-js/store';
 
 function createBeforeLeave() {
@@ -18,7 +18,14 @@ function createBeforeLeave() {
       preventDefault: () => e.defaultPrevented = true
     };
     for (const l of listeners) l.listener({
-      ...e,
+      to,
+      options,
+      // delegate to the shared event so later listeners' preventDefault
+      // calls are observable from earlier listeners
+      get defaultPrevented() {
+        return e.defaultPrevented;
+      },
+      preventDefault: e.preventDefault,
       from: l.location,
       retry: force => {
         force && (ignore = true);
@@ -122,7 +129,12 @@ function createMatcher(path, partial, matchFilters) {
   const segments = pattern.split("/").filter(Boolean);
   const len = segments.length;
   return location => {
-    const locSegments = location.split("/").filter(Boolean);
+    const locSegments = location.split("/");
+    // tolerate a single leading and trailing slash, but reject empty interior
+    // segments so `/foo//bar` doesn't silently match `/foo/bar` (#567)
+    if (locSegments[0] === "") locSegments.shift();
+    if (locSegments.length && locSegments[locSegments.length - 1] === "") locSegments.pop();
+    if (locSegments.includes("")) return null;
     const lenDiff = locSegments.length - len;
     if (lenDiff < 0 || lenDiff > 0 && splat === undefined && !partial) {
       return null;
@@ -364,7 +376,11 @@ const useMatch = (path, matchFilters) => {
  * const breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb))
  * ```
  */
-const useCurrentMatches = () => useRouter().matches;
+const useCurrentMatches = () => {
+  const router = useRouter();
+  // return a copy so user mutations (eg. `.reverse()`) can't corrupt router state
+  return () => router.matches().slice();
+};
 
 /**
  * Retrieves a reactive, store-like object containing the current route path parameters as defined in the Route.
@@ -407,11 +423,20 @@ const useParams = () => useRouter().params;
  * ```
  */
 const useSearchParams = () => {
-  const location = useLocation();
+  const router = useRouter();
+  const location = router.location;
   const navigate = useNavigate();
   const setSearchParams = (params, options) => {
-    const searchString = untrack(() => mergeSearchString(location.search, params) + location.hash);
-    navigate(searchString, {
+    const to = untrack(() => {
+      // merge onto the in-flight navigation target (if any) so consecutive
+      // synchronous calls compose instead of the later one winning
+      const pending = router.pendingTarget && new URL(router.pendingTarget.value, mockBase);
+      const pathname = pending ? pending.pathname : location.pathname;
+      const search = pending ? pending.search : location.search;
+      const hash = pending ? pending.hash : location.hash;
+      return pathname + mergeSearchString(search, params) + hash;
+    });
+    navigate(to, {
       scroll: false,
       resolve: false,
       ...options
@@ -455,6 +480,12 @@ const useBeforeLeave = listener => {
   });
   onCleanup(s);
 };
+
+// Encodes a static path segment like `encodeURIComponent`, but leaves RFC 3986
+// pchar characters (sub-delims / ":" / "@") literal, matching how browsers
+// report them in `location.pathname`. Non-ASCII characters (eg. CJK paths) are
+// still percent-encoded exactly as before, since browsers encode those too.
+const encodeSegment = s => encodeURIComponent(s).replace(/%(2B|40|3A|24|26|2C|3B|3D)/g, m => decodeURIComponent(m));
 function createRoutes(routeDef, base = "") {
   const {
     component,
@@ -475,7 +506,7 @@ function createRoutes(routeDef, base = "") {
       const path = joinPaths(base, expandedPath);
       let pattern = isLeaf ? path : path.split("/*", 1)[0];
       pattern = pattern.split("/").map(s => {
-        return s.startsWith(":") || s.startsWith("*") ? s : encodeURIComponent(s);
+        return s.startsWith(":") || s.startsWith("*") ? s : encodeSegment(s);
       }).join("/");
       acc.push({
         ...shared,
@@ -549,7 +580,9 @@ function createLocation(path, state, queryWrapper) {
   const url = createMemo(prev => {
     const path_ = path();
     try {
-      return new URL(path_, origin);
+      // anchor rooted paths against the origin explicitly - a path with
+      // doubled leading slashes would otherwise parse as protocol-relative
+      return new URL(path_[0] === "/" ? mockBase + path_ : path_, origin);
     } catch (err) {
       console.error(`Invalid path ${path_}`);
       return prev;
@@ -677,6 +710,9 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     location,
     params,
     isRouting,
+    get pendingTarget() {
+      return lastTransitionTarget;
+    },
     renderPath,
     parsePath,
     navigatorFactory,
@@ -925,6 +961,9 @@ function Routes(props) {
   }
   const disposers = [];
   let root;
+  // dispose the detached per-route roots when this component unmounts, otherwise
+  // they stay subscribed to `matches` and crash on a later navigation (#451)
+  onCleanup(() => disposers.forEach(dispose => dispose()));
   const routeStates = createMemo(on(props.routerState.matches, (nextMatches, prevMatches, prev) => {
     let equal = prevMatches && nextMatches.length === prevMatches.length;
     const next = [];
@@ -1078,12 +1117,12 @@ function getCache() {
  * Revalidates the given cache entry/entries.
  */
 function revalidate(key, force = true) {
+  const now = Date.now();
+  // force the cache miss synchronously so a `refetch` in the same tick sees it —
+  // startTransition defers its callback to a microtask (#497)
+  force && cacheKeyOp(key, entry => entry[0] = 0);
   return startTransition(() => {
-    const now = Date.now();
-    cacheKeyOp(key, entry => {
-      force && (entry[0] = 0); //force cache miss
-      entry[4][1](now); // retrigger live signals
-    });
+    cacheKeyOp(key, entry => entry[4][1](now)); // retrigger live signals
   });
 }
 function cacheKeyOp(key, fn) {
@@ -1265,7 +1304,7 @@ function useSubmission(fn, filter) {
   const submissions = useSubmissions(fn, filter);
   return new Proxy({}, {
     get(_, property) {
-      if (submissions.length === 0 && property === "clear" || property === "retry") return () => {};
+      if (submissions.length === 0 && (property === "clear" || property === "retry")) return () => {};
       return submissions[submissions.length - 1]?.[property];
     }
   });
@@ -1356,7 +1395,10 @@ function toAction(fn, url) {
   fn.url = url;
   if (!isServer) {
     actions.set(url, fn);
-    getOwner() && onCleanup(() => actions.delete(url));
+    // Only remove the registration if it still belongs to this instance —
+    // a re-created action (e.g. a new `.with()` binding after revalidation)
+    // may have registered itself under the same URL since.
+    getOwner() && onCleanup(() => actions.get(url) === fn && actions.delete(url));
   }
   return fn;
 }
@@ -1508,10 +1550,107 @@ function setupNativeEvents({
   };
 }
 
+const STORAGE_KEY = "solid-router:scroll";
+
+/**
+ * Explicit scroll restoration for back/forward navigation. The browser's
+ * native same-document heuristic is unreliable for suspense-driven rendering:
+ * if the destination route forces a layout while the document is still short,
+ * the saved offset for the previous entry is clamped and lost (#577).
+ *
+ * Positions are captured continuously from the scroll event, keyed by the
+ * `_depth` the router already stamps on every history entry — capturing at
+ * scroll time (rather than at exit) stays correct through `useBeforeLeave`
+ * blocked/reverted traversals. The map persists to sessionStorage on pagehide
+ * so restoration survives reloads, which `scrollRestoration = "manual"`
+ * otherwise disables. Restoration runs once routing settles; if the document
+ * is still shorter than the target (a boundary below the fold hasn't
+ * resolved), a ResizeObserver retries as content grows, cancelled by the
+ * first user scroll.
+ */
+function createScrollRestoration() {
+  window.history.scrollRestoration = "manual";
+  // the current entry needs its depth stamp for captures to have a key, even
+  // if something replaced history.state after the lifecycle module loaded
+  saveCurrentDepth();
+  let positions = {};
+  try {
+    positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY)) || {};
+  } catch {}
+  const depth = () => window.history.state && window.history.state._depth;
+  let programmatic = false;
+  let pending;
+  let disconnect;
+  const cancelGuard = () => {
+    disconnect && disconnect();
+    disconnect = undefined;
+  };
+  const unbind = [bindEvent(window, "scroll", () => {
+    const d = depth();
+    if (d != null) positions[d] = window.scrollY;
+    if (!programmatic) {
+      // the user took over — a pending or chasing restore would yank them
+      pending = undefined;
+      cancelGuard();
+    }
+  }), bindEvent(window, "pagehide", () => {
+    try {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(positions));
+    } catch {}
+  })];
+  const restore = () => {
+    if (pending == null) return;
+    const y = positions[pending];
+    pending = undefined;
+    if (y == null) return;
+    cancelGuard();
+    const attempt = () => {
+      programmatic = true;
+      window.scrollTo(0, y);
+      programmatic = false;
+      // reachable once the document is tall enough to hold the offset
+      return document.documentElement.scrollHeight - window.innerHeight >= y;
+    };
+    if (!attempt() && typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(() => attempt() && cancelGuard());
+      observer.observe(document.documentElement);
+      disconnect = () => observer.disconnect();
+    }
+  };
+  return {
+    /** Before the router reacts to a popstate: mark the traversal target. */
+    onPop() {
+      pending = depth();
+    },
+    /** After a push: forward entries died, and this depth may be reused. */
+    onPush() {
+      const d = depth();
+      if (d != null) for (const k in positions) +k >= d && delete positions[k];
+    },
+    create(router) {
+      createEffect(on(router.isRouting, routing => routing || restore(), {
+        defer: true
+      }));
+      onCleanup(() => {
+        unbind.forEach(u => u());
+        cancelGuard();
+      });
+      // reload/back_forward document loads land on an existing entry; a fresh
+      // navigation starts a new one and belongs at the top
+      const [nav] = performance.getEntriesByType && performance.getEntriesByType("navigation");
+      if (nav && nav.type !== "navigate") {
+        pending = depth();
+        restore();
+      }
+    }
+  };
+}
+
 function Router(props) {
   if (isServer) return StaticRouter(props);
+  const restoration = props.scrollRestoration ? createScrollRestoration() : undefined;
   const getSource = () => {
-    const url = window.location.pathname.replace(/^\/+/, "/") + window.location.search;
+    const url = window.location.pathname + window.location.search;
     const state = window.history.state && window.history.state._depth && Object.keys(window.history.state).length === 1 ? undefined : window.history.state;
     return {
       value: url + window.location.hash,
@@ -1534,23 +1673,33 @@ function Router(props) {
       }
       scrollToHash(decodeURIComponent(window.location.hash.slice(1)), scroll);
       saveCurrentDepth();
+      restoration && !replace && restoration.onPush();
+    },
+    init: notify => {
+      const handler = notifyIfNotBlocked(notify, delta => {
+        if (delta) {
+          return !beforeLeave.confirm(delta);
+        } else {
+          const s = getSource();
+          return !beforeLeave.confirm(s.value, {
+            state: s.state
+          });
+        }
+      });
+      return bindEvent(window, "popstate", restoration ? () => {
+        restoration.onPop();
+        handler();
+      } : handler);
+    },
+    create: router => {
+      setupNativeEvents({
+        preload: props.preload,
+        explicitLinks: props.explicitLinks,
+        actionBase: props.actionBase,
+        transformUrl: props.transformUrl
+      })(router);
+      restoration && restoration.create(router);
     },
-    init: notify => bindEvent(window, "popstate", notifyIfNotBlocked(notify, delta => {
-      if (delta) {
-        return !beforeLeave.confirm(delta);
-      } else {
-        const s = getSource();
-        return !beforeLeave.confirm(s.value, {
-          state: s.state
-        });
-      }
-    })),
-    create: setupNativeEvents({
-      preload: props.preload,
-      explicitLinks: props.explicitLinks,
-      actionBase: props.actionBase,
-      transformUrl: props.transformUrl
-    }),
     utils: {
       go: delta => window.history.go(delta),
       beforeLeave
@@ -1681,8 +1830,9 @@ function A(props) {
   const isActive = createMemo(() => {
     const to_ = to();
     if (to_ === undefined) return [false, false];
-    const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
-    const loc = decodeURI(normalizePath(location.pathname).toLowerCase());
+    // trailing slashes are ignored so `/route` and `/route/` share active state
+    const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase().replace(/\/$/, "");
+    const loc = decodeURI(normalizePath(location.pathname).toLowerCase().replace(/\/$/, ""));
     return [props.end ? path === loc : loc.startsWith(path + "/") || loc === path, path === loc];
   });
   return (() => {

package/dist/lifecycle.js

@@ -17,7 +17,14 @@ export function createBeforeLeave() {
         };
         for (const l of listeners)
             l.listener({
-                ...e,
+                to,
+                options,
+                // delegate to the shared event so later listeners' preventDefault
+                // calls are observable from earlier listeners
+                get defaultPrevented() {
+                    return e.defaultPrevented;
+                },
+                preventDefault: e.preventDefault,
                 from: l.location,
                 retry: (force) => {
                     force && (ignore = true);

package/dist/routers/Router.d.ts

@@ -5,5 +5,13 @@ export type RouterProps = BaseRouterProps & {
     actionBase?: string;
     explicitLinks?: boolean;
     preload?: boolean;
+    /**
+     * Opt-in explicit scroll restoration for back/forward navigation (read
+     * once, not reactive). Sets `history.scrollRestoration = "manual"` and
+     * restores saved positions after the navigation settles, replacing the
+     * browser heuristic that loses offsets when the destination route forces
+     * a layout while rendering (#577).
+     */
+    scrollRestoration?: boolean;
 };
 export declare function Router(props: RouterProps): JSX.Element;

package/dist/routers/Router.js

@@ -3,11 +3,13 @@ import { createRouter, scrollToHash, bindEvent } from "./createRouter.js";
 import { StaticRouter } from "./StaticRouter.js";
 import { setupNativeEvents } from "../data/events.js";
 import { createBeforeLeave, keepDepth, notifyIfNotBlocked, saveCurrentDepth } from "../lifecycle.js";
+import { createScrollRestoration } from "./scrollRestoration.js";
 export function Router(props) {
     if (isServer)
         return StaticRouter(props);
+    const restoration = props.scrollRestoration ? createScrollRestoration() : undefined;
     const getSource = () => {
-        const url = window.location.pathname.replace(/^\/+/, "/") + window.location.search;
+        const url = window.location.pathname + window.location.search;
         const state = window.history.state && window.history.state._depth && Object.keys(window.history.state).length === 1 ? undefined : window.history.state;
         return {
             value: url + window.location.hash,
@@ -26,17 +28,29 @@ export function Router(props) {
             }
             scrollToHash(decodeURIComponent(window.location.hash.slice(1)), scroll);
             saveCurrentDepth();
+            restoration && !replace && restoration.onPush();
+        },
+        init: notify => {
+            const handler = notifyIfNotBlocked(notify, delta => {
+                if (delta) {
+                    return !beforeLeave.confirm(delta);
+                }
+                else {
+                    const s = getSource();
+                    return !beforeLeave.confirm(s.value, { state: s.state });
+                }
+            });
+            return bindEvent(window, "popstate", restoration
+                ? () => {
+                    restoration.onPop();
+                    handler();
+                }
+                : handler);
+        },
+        create: router => {
+            setupNativeEvents({ preload: props.preload, explicitLinks: props.explicitLinks, actionBase: props.actionBase, transformUrl: props.transformUrl })(router);
+            restoration && restoration.create(router);
         },
-        init: notify => bindEvent(window, "popstate", notifyIfNotBlocked(notify, delta => {
-            if (delta) {
-                return !beforeLeave.confirm(delta);
-            }
-            else {
-                const s = getSource();
-                return !beforeLeave.confirm(s.value, { state: s.state });
-            }
-        })),
-        create: setupNativeEvents({ preload: props.preload, explicitLinks: props.explicitLinks, actionBase: props.actionBase, transformUrl: props.transformUrl }),
         utils: {
             go: delta => window.history.go(delta),
             beforeLeave

package/dist/routers/components.d.ts

@@ -1,5 +1,5 @@
 import type { Component, JSX } from "solid-js";
-import type { MatchFilters, RouteDefinition, RoutePreloadFunc, RouterIntegration, RouteSectionProps } from "../types.js";
+import type { MatchFilters, RouteDefinition, RoutePreloadFunc, RouterIntegration, RouteSectionComponent, RouteSectionProps } from "../types.js";
 export type BaseRouterProps = {
     base?: string;
     /**
@@ -19,7 +19,7 @@ export type RouteProps<S extends string, T = unknown> = {
     children?: JSX.Element;
     preload?: RoutePreloadFunc<T>;
     matchFilters?: MatchFilters<S>;
-    component?: Component<RouteSectionProps<T>>;
+    component?: RouteSectionComponent<T>;
     info?: Record<string, any>;
     /** @deprecated use preload */
     load?: RoutePreloadFunc<T>;

package/dist/routers/components.jsx

@@ -1,5 +1,5 @@
 /*@refresh skip*/
-import { children, createMemo, createRoot, getOwner, mergeProps, on, Show, untrack } from "solid-js";
+import { children, createMemo, createRoot, getOwner, mergeProps, on, onCleanup, Show, untrack } from "solid-js";
 import { getRequestEvent, isServer } from "solid-js/web";
 import { createBranches, createRouteContext, createRouterContext, getIntent, getRouteMatches, RouteContextObj, RouterContextObj, setInPreloadFn } from "../routing.js";
 export const createRouterComponent = (router) => (props) => {
@@ -54,6 +54,9 @@ function Routes(props) {
     }
     const disposers = [];
     let root;
+    // dispose the detached per-route roots when this component unmounts, otherwise
+    // they stay subscribed to `matches` and crash on a later navigation (#451)
+    onCleanup(() => disposers.forEach(dispose => dispose()));
     const routeStates = createMemo(on(props.routerState.matches, (nextMatches, prevMatches, prev) => {
         let equal = prevMatches && nextMatches.length === prevMatches.length;
         const next = [];

package/dist/routers/scrollRestoration.d.ts

@@ -0,0 +1,24 @@
+import type { RouterContext } from "../types.js";
+/**
+ * Explicit scroll restoration for back/forward navigation. The browser's
+ * native same-document heuristic is unreliable for suspense-driven rendering:
+ * if the destination route forces a layout while the document is still short,
+ * the saved offset for the previous entry is clamped and lost (#577).
+ *
+ * Positions are captured continuously from the scroll event, keyed by the
+ * `_depth` the router already stamps on every history entry — capturing at
+ * scroll time (rather than at exit) stays correct through `useBeforeLeave`
+ * blocked/reverted traversals. The map persists to sessionStorage on pagehide
+ * so restoration survives reloads, which `scrollRestoration = "manual"`
+ * otherwise disables. Restoration runs once routing settles; if the document
+ * is still shorter than the target (a boundary below the fold hasn't
+ * resolved), a ResizeObserver retries as content grows, cancelled by the
+ * first user scroll.
+ */
+export declare function createScrollRestoration(): {
+    /** Before the router reacts to a popstate: mark the traversal target. */
+    onPop(): void;
+    /** After a push: forward entries died, and this depth may be reused. */
+    onPush(): void;
+    create(router: RouterContext): void;
+};

package/dist/routers/scrollRestoration.js

@@ -0,0 +1,106 @@
+import { createEffect, on, onCleanup } from "solid-js";
+import { saveCurrentDepth } from "../lifecycle.js";
+import { bindEvent } from "./createRouter.js";
+const STORAGE_KEY = "solid-router:scroll";
+/**
+ * Explicit scroll restoration for back/forward navigation. The browser's
+ * native same-document heuristic is unreliable for suspense-driven rendering:
+ * if the destination route forces a layout while the document is still short,
+ * the saved offset for the previous entry is clamped and lost (#577).
+ *
+ * Positions are captured continuously from the scroll event, keyed by the
+ * `_depth` the router already stamps on every history entry — capturing at
+ * scroll time (rather than at exit) stays correct through `useBeforeLeave`
+ * blocked/reverted traversals. The map persists to sessionStorage on pagehide
+ * so restoration survives reloads, which `scrollRestoration = "manual"`
+ * otherwise disables. Restoration runs once routing settles; if the document
+ * is still shorter than the target (a boundary below the fold hasn't
+ * resolved), a ResizeObserver retries as content grows, cancelled by the
+ * first user scroll.
+ */
+export function createScrollRestoration() {
+    window.history.scrollRestoration = "manual";
+    // the current entry needs its depth stamp for captures to have a key, even
+    // if something replaced history.state after the lifecycle module loaded
+    saveCurrentDepth();
+    let positions = {};
+    try {
+        positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY)) || {};
+    }
+    catch { }
+    const depth = () => window.history.state && window.history.state._depth;
+    let programmatic = false;
+    let pending;
+    let disconnect;
+    const cancelGuard = () => {
+        disconnect && disconnect();
+        disconnect = undefined;
+    };
+    const unbind = [
+        bindEvent(window, "scroll", () => {
+            const d = depth();
+            if (d != null)
+                positions[d] = window.scrollY;
+            if (!programmatic) {
+                // the user took over — a pending or chasing restore would yank them
+                pending = undefined;
+                cancelGuard();
+            }
+        }),
+        bindEvent(window, "pagehide", () => {
+            try {
+                sessionStorage.setItem(STORAGE_KEY, JSON.stringify(positions));
+            }
+            catch { }
+        })
+    ];
+    const restore = () => {
+        if (pending == null)
+            return;
+        const y = positions[pending];
+        pending = undefined;
+        if (y == null)
+            return;
+        cancelGuard();
+        const attempt = () => {
+            programmatic = true;
+            window.scrollTo(0, y);
+            programmatic = false;
+            // reachable once the document is tall enough to hold the offset
+            return document.documentElement.scrollHeight - window.innerHeight >= y;
+        };
+        if (!attempt() && typeof ResizeObserver !== "undefined") {
+            const observer = new ResizeObserver(() => attempt() && cancelGuard());
+            observer.observe(document.documentElement);
+            disconnect = () => observer.disconnect();
+        }
+    };
+    return {
+        /** Before the router reacts to a popstate: mark the traversal target. */
+        onPop() {
+            pending = depth();
+        },
+        /** After a push: forward entries died, and this depth may be reused. */
+        onPush() {
+            const d = depth();
+            if (d != null)
+                for (const k in positions)
+                    +k >= d && delete positions[k];
+        },
+        create(router) {
+            createEffect(on(router.isRouting, routing => routing || restore(), { defer: true }));
+            onCleanup(() => {
+                unbind.forEach(u => u());
+                cancelGuard();
+            });
+            // reload/back_forward document loads land on an existing entry; a fresh
+            // navigation starts a new one and belongs at the top
+            const [nav] = (performance.getEntriesByType &&
+                performance.getEntriesByType("navigation"));
+            if (nav && nav.type !== "navigate") {
+                pending = depth();
+                restore();
+            }
+        }
+    };
+}

package/dist/routing.js

@@ -116,7 +116,11 @@ export const useMatch = (path, matchFilters) => {
  * const breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb))
  * ```
  */
-export const useCurrentMatches = () => useRouter().matches;
+export const useCurrentMatches = () => {
+    const router = useRouter();
+    // return a copy so user mutations (eg. `.reverse()`) can't corrupt router state
+    return () => router.matches().slice();
+};
 /**
  * Retrieves a reactive, store-like object containing the current route path parameters as defined in the Route.
  *
@@ -157,11 +161,20 @@ export const useParams = () => useRouter().params;
  * ```
  */
 export const useSearchParams = () => {
-    const location = useLocation();
+    const router = useRouter();
+    const location = router.location;
     const navigate = useNavigate();
     const setSearchParams = (params, options) => {
-        const searchString = untrack(() => mergeSearchString(location.search, params) + location.hash);
-        navigate(searchString, {
+        const to = untrack(() => {
+            // merge onto the in-flight navigation target (if any) so consecutive
+            // synchronous calls compose instead of the later one winning
+            const pending = router.pendingTarget && new URL(router.pendingTarget.value, mockBase);
+            const pathname = pending ? pending.pathname : location.pathname;
+            const search = pending ? pending.search : location.search;
+            const hash = pending ? pending.hash : location.hash;
+            return pathname + mergeSearchString(search, params) + hash;
+        });
+        navigate(to, {
             scroll: false,
             resolve: false,
             ...options
@@ -204,6 +217,11 @@ export const useBeforeLeave = (listener) => {
     });
     onCleanup(s);
 };
+// Encodes a static path segment like `encodeURIComponent`, but leaves RFC 3986
+// pchar characters (sub-delims / ":" / "@") literal, matching how browsers
+// report them in `location.pathname`. Non-ASCII characters (eg. CJK paths) are
+// still percent-encoded exactly as before, since browsers encode those too.
+const encodeSegment = (s) => encodeURIComponent(s).replace(/%(2B|40|3A|24|26|2C|3B|3D)/g, m => decodeURIComponent(m));
 export function createRoutes(routeDef, base = "") {
     const { component, preload, load, children, info } = routeDef;
     const isLeaf = !children || (Array.isArray(children) && !children.length);
@@ -220,7 +238,7 @@ export function createRoutes(routeDef, base = "") {
             pattern = pattern
                 .split("/")
                 .map((s) => {
-                return s.startsWith(":") || s.startsWith("*") ? s : encodeURIComponent(s);
+                return s.startsWith(":") || s.startsWith("*") ? s : encodeSegment(s);
             })
                 .join("/");
             acc.push({
@@ -296,7 +314,9 @@ function createLocation(path, state, queryWrapper) {
     const url = createMemo(prev => {
         const path_ = path();
         try {
-            return new URL(path_, origin);
+            // anchor rooted paths against the origin explicitly - a path with
+            // doubled leading slashes would otherwise parse as protocol-relative
+            return new URL(path_[0] === "/" ? mockBase + path_ : path_, origin);
         }
         catch (err) {
             console.error(`Invalid path ${path_}`);
@@ -421,6 +441,9 @@ export function createRouterContext(integration, branches, getContext, options =
         location,
         params,
         isRouting,
+        get pendingTarget() {
+            return lastTransitionTarget;
+        },
         renderPath,
         parsePath,
         navigatorFactory,

package/dist/types.d.ts

@@ -71,12 +71,13 @@ export interface RouteSectionProps<T = unknown> {
     data: T;
     children?: JSX.Element;
 }
-export type RouteDefinition<S extends string | string[] = any, T = unknown> = {
+export type RouteSectionComponent<T = unknown> = Component<RouteSectionProps<T>> | Component<Omit<RouteSectionProps<T>, "children">> | Component<{}>;
+export type RouteDefinition<S extends string | string[] = any, T = any> = {
     path?: S;
     matchFilters?: MatchFilters<S>;
     preload?: RoutePreloadFunc<T>;
     children?: RouteDefinition | RouteDefinition[];
-    component?: Component<RouteSectionProps<T>>;
+    component?: RouteSectionComponent<T>;
     info?: Record<string, any>;
     /** @deprecated use preload */
     load?: RoutePreloadFunc;
@@ -137,6 +138,8 @@ export interface RouterContext {
     params: Params;
     navigatorFactory: NavigatorFactory;
     isRouting: () => boolean;
+    /** The target of the in-flight navigation transition, if any. Not reactive. */
+    readonly pendingTarget?: LocationChange;
     matches: () => RouteMatch[];
     renderPath(path: string): string;
     parsePath(str: string): string;

package/dist/utils.js

@@ -52,7 +52,15 @@ export function createMatcher(path, partial, matchFilters) {
     const segments = pattern.split("/").filter(Boolean);
     const len = segments.length;
     return (location) => {
-        const locSegments = location.split("/").filter(Boolean);
+        const locSegments = location.split("/");
+        // tolerate a single leading and trailing slash, but reject empty interior
+        // segments so `/foo//bar` doesn't silently match `/foo/bar` (#567)
+        if (locSegments[0] === "")
+            locSegments.shift();
+        if (locSegments.length && locSegments[locSegments.length - 1] === "")
+            locSegments.pop();
+        if (locSegments.includes(""))
+            return null;
         const lenDiff = locSegments.length - len;
         if (lenDiff < 0 || (lenDiff > 0 && splat === undefined && !partial)) {
             return null;

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.16.1",
+  "version": "0.16.3",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",