@solidjs/router 0.17.0-next.3 → 0.17.0-next.4

package/dist/components.d.ts

@@ -1,6 +1,6 @@
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { Location, Navigator } from "./types.js";
-declare module "solid-js" {
+declare module "@solidjs/web/jsx-runtime" {
     namespace JSX {
         interface AnchorHTMLAttributes<T> {
             state?: string;

package/dist/components.jsx

@@ -26,8 +26,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];
     });
     const className = createMemo(() => [toClassName(props.class), isActive()[0] ? props.activeClass : props.inactiveClass]

package/dist/data/action.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from "solid-js";
+import { type JSX } from "@solidjs/web";
 import type { Submission, NarrowResponse } from "../types.js";
 export type Action<T extends Array<any>, U, V = T> = (T extends [FormData | URLSearchParams] | [] ? JSX.SerializableAttributeValue : unknown) & ((...vars: T) => Promise<NarrowResponse<U>>) & {
     url: string;

package/dist/data/action.js

@@ -122,7 +122,11 @@ function toAction(invoke, url, boundArgs = [], base = url, submitHooks = new Map
     fn[invokeSymbol] = invoke;
     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/index.js

@@ -17,7 +17,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);
@@ -121,7 +128,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;
@@ -370,7 +382,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.
@@ -383,7 +399,7 @@ const useCurrentMatches = () => useRouter().matches;
  * const getUser = query(() => fetchUser(params.id), "user");
  * ```
  */
-const useParams = () => useRouter().params;
+const useParams = () => useRoute().params;
 
 /**
  * Retrieves a tuple containing a reactive object to read the current location's query parameters and a method to update them.
@@ -413,11 +429,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
@@ -461,6 +486,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,
@@ -480,7 +511,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,12 +580,21 @@ function getRouteMatches(branches, location) {
   }
   return [];
 }
+function mergeParams(matches) {
+  const params = {};
+  for (let i = 0; i < matches.length; i++) {
+    Object.assign(params, matches[i].params);
+  }
+  return params;
+}
 function createLocation(path, state, queryWrapper) {
   const origin = new URL(mockBase);
   const url = createMemo((prev = origin) => {
     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;
@@ -642,17 +682,12 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     }
     return getRouteMatches(branches(), location.pathname);
   });
-  const buildParams = () => {
-    const m = matches();
-    const params = {};
-    for (let i = 0; i < m.length; i++) {
-      Object.assign(params, m[i].params);
-    }
-    return params;
-  };
-  const params = utils.paramsWrapper ? utils.paramsWrapper(buildParams, branches) : createMemoObject(buildParams);
+  const buildParams = () => mergeParams(matches());
+  const wrapParams = utils.paramsWrapper ? getParams => utils.paramsWrapper(getParams, branches) : getParams => createMemoObject(getParams);
+  const params = wrapParams(buildParams);
   const baseRoute = {
     pattern: basePath,
+    params,
     path: () => basePath,
     outlet: () => null,
     resolvePath(to) {
@@ -663,7 +698,11 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     base: baseRoute,
     location,
     params,
+    wrapParams,
     isRouting,
+    get pendingTarget() {
+      return lastTransitionTarget;
+    },
     renderPath,
     parsePath,
     navigatorFactory,
@@ -808,11 +847,11 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     }];
   }
 }
-function createRouteContext(router, parent, outlet, match) {
+function createRouteContext(router, parent, outlet, match, matches = () => [match()]) {
   const {
     base,
     location,
-    params
+    wrapParams
   } = router;
   const {
     pattern,
@@ -820,6 +859,10 @@ function createRouteContext(router, parent, outlet, match) {
     preload
   } = match().route;
   const path = createMemo(() => match().path);
+  // Params scoped to this route's lifetime. `matches` is expected to retain
+  // its last valid value while this route is being torn down, so outgoing
+  // components and preloads never observe another route's params.
+  const params = wrapParams(() => mergeParams(matches()));
   component && component.preload && component.preload();
   inPreloadFn = true;
   const data = preload ? preload({
@@ -831,6 +874,7 @@ function createRouteContext(router, parent, outlet, match) {
   const route = {
     parent,
     pattern,
+    params,
     path,
     outlet: () => component ? createComponent(component, {
       params,
@@ -940,6 +984,13 @@ function Routes(props) {
   const disposers = [];
   let root;
   let prevMatches;
+  // 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()));
+  // Route roots must outlive re-runs of the `routeStates` memo below, so they
+  // are created under the owner of this component rather than the memo's
+  // computation (which disposes its children every time it re-runs).
+  const owner = getOwner();
   const routeStates = createMemo(prev => {
     const nextMatches = props.routerState.matches();
     const previousMatches = prevMatches;
@@ -955,13 +1006,19 @@ function Routes(props) {
         if (disposers[i]) {
           disposers[i]();
         }
-        createRoot(dispose => {
+        runWithOwner(owner, () => createRoot(dispose => {
           disposers[i] = dispose;
-          next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()?.[i + 1]), () => {
+          const routeKey = nextMatch.route.key;
+          // Retain the last matches in which this route participated so
+          // that its components and preloads never observe another
+          // route's params/path while this route is being torn down.
+          const matchesAtLevel = createMemo(prev => {
             const routeMatches = props.routerState.matches();
-            return routeMatches[i] ?? routeMatches[0];
+            const m = routeMatches[i];
+            return m && m.route.key === routeKey ? routeMatches : prev || nextMatches;
           });
-        });
+          next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()?.[i + 1]), () => matchesAtLevel()[i], matchesAtLevel);
+        }));
       }
     }
     disposers.splice(nextMatches.length).forEach(dispose => dispose());
@@ -1386,7 +1443,10 @@ function toAction(invoke, url, boundArgs = [], base = url, submitHooks = new Map
   fn[invokeSymbol] = invoke;
   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;
 }
@@ -1556,7 +1616,7 @@ function setupNativeEvents({
 function Router(props) {
   if (isServer) return StaticRouter(props);
   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,
@@ -1714,6 +1774,9 @@ function MemoryRouter(props) {
 }
 
 var _tmpl$ = /*#__PURE__*/template(`<a>`);
+
+// the JSX namespace lives in @solidjs/web's jsx-runtime module as of 2.0
+
 function toClassName(value) {
   if (!value) return "";
   if (typeof value === "string" || typeof value === "number") return String(value);
@@ -1735,30 +1798,29 @@ 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];
   });
   const className = createMemo(() => [toClassName(props.class), isActive()[0] ? props.activeClass : props.inactiveClass].filter(Boolean).join(" "));
-  return (() => {
-    var _el$ = _tmpl$();
-    spread(_el$, mergeProps(rest, {
-      get href() {
-        return href() || props.href;
-      },
-      get state() {
-        return JSON.stringify(props.state);
-      },
-      get ["class"]() {
-        return className();
-      },
-      "link": true,
-      get ["aria-current"]() {
-        return isActive()[1] ? "page" : undefined;
-      }
-    }), false);
-    return _el$;
-  })();
+  var _el$ = _tmpl$();
+  spread(_el$, mergeProps(rest, {
+    get href() {
+      return href() || props.href;
+    },
+    get state() {
+      return JSON.stringify(props.state);
+    },
+    get ["class"]() {
+      return className();
+    },
+    "link": true,
+    get ["aria-current"]() {
+      return isActive()[1] ? "page" : undefined;
+    }
+  }), false);
+  return _el$;
 }
 function Navigate(props) {
   const navigate = useNavigate();

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/HashRouter.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { BaseRouterProps } from "./components.jsx";
 export declare function hashParser(str: string): string;
 export type HashRouterProps = BaseRouterProps & {

package/dist/routers/MemoryRouter.d.ts

@@ -1,6 +1,6 @@
 import type { LocationChange } from "../types.js";
 import type { BaseRouterProps } from "./components.jsx";
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 export type MemoryHistory = {
     get: () => string;
     set: (change: LocationChange) => void;

package/dist/routers/Router.d.ts

@@ -1,5 +1,5 @@
 import type { BaseRouterProps } from "./components.jsx";
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 export type RouterProps = BaseRouterProps & {
     url?: string;
     actionBase?: string;

package/dist/routers/Router.js

@@ -7,7 +7,7 @@ export function Router(props) {
     if (isServer)
         return StaticRouter(props);
     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,

package/dist/routers/StaticRouter.d.ts

@@ -1,5 +1,5 @@
 import { type BaseRouterProps } from "./components.jsx";
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 export type StaticRouterProps = BaseRouterProps & {
     url?: string;
 };

package/dist/routers/components.d.ts

@@ -1,5 +1,6 @@
-import type { Component, JSX } from "solid-js";
-import type { MatchFilters, RouteDefinition, RoutePreloadFunc, RouterIntegration, RouteSectionProps } from "../types.js";
+import type { Component } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import type { MatchFilters, RouteDefinition, RoutePreloadFunc, RouterIntegration, RouteSectionComponent, RouteSectionProps } from "../types.js";
 export type BaseRouterProps = {
     base?: string;
     /**
@@ -17,7 +18,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>;
 };
 export declare const Route: <S extends string, T = unknown>(props: RouteProps<S, T>) => JSX.Element;

package/dist/routers/components.jsx

@@ -1,5 +1,5 @@
 /*@refresh skip*/
-import { children, createMemo, createRoot, getOwner, merge, untrack } from "solid-js";
+import { children, createMemo, createRoot, getOwner, merge, onCleanup, runWithOwner, untrack } from "solid-js";
 import { getRequestEvent, isServer } from "@solidjs/web";
 import { createBranches, createRouteContext, createRouterContext, getIntent, getRouteMatches, RouteContextObj, RouterContextObj, setInPreloadFn } from "../routing.js";
 export const createRouterComponent = (router) => function IntegratedRouter(props) {
@@ -64,6 +64,13 @@ function Routes(props) {
     const disposers = [];
     let root;
     let prevMatches;
+    // 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()));
+    // Route roots must outlive re-runs of the `routeStates` memo below, so they
+    // are created under the owner of this component rather than the memo's
+    // computation (which disposes its children every time it re-runs).
+    const owner = getOwner();
     const routeStates = createMemo((prev) => {
         const nextMatches = props.routerState.matches();
         const previousMatches = prevMatches;
@@ -80,13 +87,19 @@ function Routes(props) {
                 if (disposers[i]) {
                     disposers[i]();
                 }
-                createRoot(dispose => {
+                runWithOwner(owner, () => createRoot(dispose => {
                     disposers[i] = dispose;
-                    next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()?.[i + 1]), () => {
+                    const routeKey = nextMatch.route.key;
+                    // Retain the last matches in which this route participated so
+                    // that its components and preloads never observe another
+                    // route's params/path while this route is being torn down.
+                    const matchesAtLevel = createMemo((prev) => {
                         const routeMatches = props.routerState.matches();
-                        return routeMatches[i] ?? routeMatches[0];
+                        const m = routeMatches[i];
+                        return m && m.route.key === routeKey ? routeMatches : prev || nextMatches;
                     });
-                });
+                    next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()?.[i + 1]), () => matchesAtLevel()[i], matchesAtLevel);
+                }));
             }
         }
         disposers.splice(nextMatches.length).forEach(dispose => dispose());

package/dist/routers/createRouter.d.ts

@@ -5,6 +5,6 @@ export declare function createRouter(config: {
     init?: (notify: (value?: string | LocationChange) => void) => () => void;
     create?: (router: RouterContext) => void;
     utils?: Partial<RouterUtils>;
-}): (props: import("./components.jsx").BaseRouterProps) => import("solid-js").JSX.Element;
+}): (props: import("./components.jsx").BaseRouterProps) => import("@solidjs/web").JSX.Element;
 export declare function bindEvent(target: EventTarget, type: string, handler: EventListener): () => void;
 export declare function scrollToHash(hash: string, fallbackTop?: boolean): void;

package/dist/routing.d.ts

@@ -1,11 +1,11 @@
-import { JSX, Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { BeforeLeaveEventArgs, Branch, Intent, Location, MatchFilters, NavigateOptions, Navigator, Params, RouteDescription, RouteContext, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SearchParams, SetSearchParams } from "./types.js";
 /** Consider this API opaque and internal. It is likely to change in the future. */
-export declare const RouterContextObj: import("solid-js").Context<RouterContext | undefined>;
-export declare const RouteContextObj: import("solid-js").Context<RouteContext | undefined>;
+export declare const RouterContextObj: import("solid-js").Context<RouterContext>;
+export declare const RouteContextObj: import("solid-js").Context<RouteContext>;
 export declare const useRouter: () => RouterContext;
 export declare const useRoute: () => RouteContext;
-export declare const useResolvedPath: (path: () => string) => Accessor<string | undefined>;
+export declare const useResolvedPath: (path: () => string) => import("solid-js").SourceAccessor<string | undefined>;
 export declare const useHref: <T extends string | undefined>(to: () => T) => () => string | T;
 /**
  * Retrieves method to do navigation. The method accepts a path to navigate to and an optional object with the following options:
@@ -79,7 +79,7 @@ export declare const usePreloadRoute: () => (url: string | URL, options?: {
  * return <div classList={{ active: Boolean(match()) }} />;
  * ```
  */
-export declare const useMatch: <S extends string>(path: () => S, matchFilters?: MatchFilters<S>) => Accessor<import("./types.js").PathMatch | undefined>;
+export declare const useMatch: <S extends string>(path: () => S, matchFilters?: MatchFilters<S>) => import("solid-js").SourceAccessor<import("./types.js").PathMatch | undefined>;
 /**
  * `useCurrentMatches` returns all the matches for the current matched route.
  * Useful for getting all the route information.
@@ -172,4 +172,4 @@ export declare function createRouterContext(integration: RouterIntegration, bran
     singleFlight?: boolean;
     transformUrl?: (url: string) => string;
 }): RouterContext;
-export declare function createRouteContext(router: RouterContext, parent: RouteContext, outlet: () => JSX.Element, match: () => RouteMatch): RouteContext;
+export declare function createRouteContext(router: RouterContext, parent: RouteContext, outlet: () => JSX.Element, match: () => RouteMatch, matches?: () => RouteMatch[]): RouteContext;

package/dist/routing.js

@@ -124,7 +124,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.
  *
@@ -136,7 +140,7 @@ export const useCurrentMatches = () => useRouter().matches;
  * const getUser = query(() => fetchUser(params.id), "user");
  * ```
  */
-export const useParams = () => useRouter().params;
+export const useParams = () => useRoute().params;
 /**
  * Retrieves a tuple containing a reactive object to read the current location's query parameters and a method to update them.
  * The object is a proxy so you must access properties to subscribe to reactive updates.
@@ -165,11 +169,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
@@ -212,6 +225,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, children, info } = routeDef;
     const isLeaf = !children || (Array.isArray(children) && !children.length);
@@ -228,7 +246,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({
@@ -299,12 +317,21 @@ export function getRouteMatches(branches, location) {
     }
     return [];
 }
+function mergeParams(matches) {
+    const params = {};
+    for (let i = 0; i < matches.length; i++) {
+        Object.assign(params, matches[i].params);
+    }
+    return params;
+}
 function createLocation(path, state, queryWrapper) {
     const origin = new URL(mockBase);
     const url = createMemo((prev = origin) => {
         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_}`);
@@ -382,19 +409,14 @@ export function createRouterContext(integration, branches, getContext, options =
         }
         return getRouteMatches(branches(), location.pathname);
     });
-    const buildParams = () => {
-        const m = matches();
-        const params = {};
-        for (let i = 0; i < m.length; i++) {
-            Object.assign(params, m[i].params);
-        }
-        return params;
-    };
-    const params = utils.paramsWrapper
-        ? utils.paramsWrapper(buildParams, branches)
-        : createMemoObject(buildParams);
+    const buildParams = () => mergeParams(matches());
+    const wrapParams = utils.paramsWrapper
+        ? (getParams) => utils.paramsWrapper(getParams, branches)
+        : (getParams) => createMemoObject(getParams);
+    const params = wrapParams(buildParams);
     const baseRoute = {
         pattern: basePath,
+        params,
         path: () => basePath,
         outlet: () => null,
         resolvePath(to) {
@@ -405,7 +427,11 @@ export function createRouterContext(integration, branches, getContext, options =
         base: baseRoute,
         location,
         params,
+        wrapParams,
         isRouting,
+        get pendingTarget() {
+            return lastTransitionTarget;
+        },
         renderPath,
         parsePath,
         navigatorFactory,
@@ -539,10 +565,14 @@ export function createRouterContext(integration, branches, getContext, options =
         ];
     }
 }
-export function createRouteContext(router, parent, outlet, match) {
-    const { base, location, params } = router;
+export function createRouteContext(router, parent, outlet, match, matches = () => [match()]) {
+    const { base, location, wrapParams } = router;
     const { pattern, component, preload } = match().route;
     const path = createMemo(() => match().path);
+    // Params scoped to this route's lifetime. `matches` is expected to retain
+    // its last valid value while this route is being torn down, so outgoing
+    // components and preloads never observe another route's params.
+    const params = wrapParams(() => mergeParams(matches()));
     component &&
         component.preload &&
         component.preload();
@@ -552,6 +582,7 @@ export function createRouteContext(router, parent, outlet, match) {
     const route = {
         parent,
         pattern,
+        params,
         path,
         outlet: () => component
             ? createComponent(component, {

package/dist/types.d.ts

@@ -1,4 +1,5 @@
-import type { Component, JSX, Signal } from "solid-js";
+import type { Component, Signal } from "solid-js";
+import type { JSX } from "@solidjs/web";
 declare module "@solidjs/web" {
     interface RequestEvent {
         response: {
@@ -55,7 +56,7 @@ export interface LocationChange<S = unknown> {
     rawPath?: string;
 }
 export interface RouterIntegration {
-    signal: Signal<LocationChange>;
+    signal: [get: () => LocationChange, set: (next: LocationChange) => void];
     create?: (router: RouterContext) => void;
     utils?: Partial<RouterUtils>;
 }
@@ -72,12 +73,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>;
 };
 export type MatchFilter = readonly string[] | RegExp | ((s: string) => boolean);
@@ -118,6 +120,7 @@ export interface RouteContext {
     parent?: RouteContext;
     child?: RouteContext;
     pattern: string;
+    params: Params;
     path: () => string;
     outlet: () => JSX.Element;
     resolvePath(to: string): string | undefined;
@@ -134,8 +137,11 @@ export interface RouterContext {
     base: RouteContext;
     location: Location;
     params: Params;
+    wrapParams: (getParams: () => 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.17.0-next.3",
+  "version": "0.17.0-next.4",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
   ],
   "sideEffects": false,
   "devDependencies": {
-    "@solidjs/web": "2.0.0-beta.7",
+    "@solidjs/web": "2.0.0-beta.18",
     "@babel/core": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
     "@changesets/cli": "^2.27.10",
@@ -38,19 +38,19 @@
     "@rollup/plugin-terser": "0.4.4",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.0",
-    "babel-preset-solid": "2.0.0-beta.7",
+    "babel-preset-solid": "2.0.0-beta.18",
     "jsdom": "^25.0.1",
     "prettier": "^3.4.1",
     "rollup": "^4.27.4",
-    "solid-js": "2.0.0-beta.7",
+    "solid-js": "2.0.0-beta.18",
     "typescript": "^5.7.2",
     "vite": "^6.0.0",
-    "vite-plugin-solid": "3.0.0-next.4",
+    "vite-plugin-solid": "3.0.0-next.10",
     "vitest": "^2.1.6"
   },
   "peerDependencies": {
-    "@solidjs/web": ">=2.0.0-beta.7 <2.0.0-experimental.0",
-    "solid-js": ">=2.0.0-beta.7 <2.0.0-experimental.0"
+    "@solidjs/web": ">=2.0.0-beta.18 <2.0.0-experimental.0",
+    "solid-js": ">=2.0.0-beta.18 <2.0.0-experimental.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsc && rollup -c",