restore params into root

Author: ryansolid

.changeset/olive-books-push.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/router": patch
+---
+
+restore params into root

src/routers/components.tsx

@@ -32,7 +32,6 @@ import type {
   RouteSectionProps,
   Location
 } from "../types.js";
-import { createMemoObject } from "../utils.js";
 
 export type BaseRouterProps = {
   base?: string;
@@ -53,16 +52,14 @@ export const createRouterComponent = (router: RouterIntegration) => (props: Base
 
   const branches = createMemo(() => createBranches(routeDefs(), props.base || ""));
   let context: Owner;
-  const routerState = createRouterContext(router, () => context, branches, {
+  const routerState = createRouterContext(router, branches, () => context, {
     base,
     singleFlight: props.singleFlight
   });
-  const location = routerState.location;
   router.create && router.create(routerState);
-
   return (
     <RouterContextObj.Provider value={routerState}>
-      <Root location={location} root={props.root} load={props.rootLoad}>
+      <Root routerState={routerState} root={props.root} load={props.rootLoad}>
         {(context = getOwner()!) && null}
         <Routes routerState={routerState} branches={branches()} />
       </Root>
@@ -71,19 +68,20 @@ export const createRouterComponent = (router: RouterIntegration) => (props: Base
 };
 
 function Root(props: {
-  location: Location<unknown>;
+  routerState: RouterContext;
   root?: Component<RouteSectionProps>;
   load?: RouteLoadFunc;
   children: JSX.Element;
 }) {
-  const location = props.location;
+  const location = props.routerState.location;
+  const params = props.routerState.params;
   const data = createMemo(
-    () => props.load && untrack(() => props.load!({ params: {}, location, intent: "preload" }))
+    () => props.load && untrack(() => props.load!({ params, location, intent: "preload" }))
   );
   return (
     <Show when={props.root} keyed fallback={props.children}>
       {Root => (
-        <Root params={{}} location={location} data={data()}>
+        <Root params={params} location={location} data={data()}>
           {props.children}
         </Root>
       )}
@@ -92,10 +90,6 @@ function Root(props: {
 }
 
 function Routes(props: { routerState: RouterContext; branches: Branch[] }) {
-  const matches = createMemo(() =>
-    getRouteMatches(props.branches, props.routerState.location.pathname)
-  );
-
   if (isServer) {
     const e = getRequestEvent();
     if (e && e.router && e.router.dataOnly) {
@@ -104,27 +98,20 @@ function Routes(props: { routerState: RouterContext; branches: Branch[] }) {
     }
     e &&
       ((e.router || (e.router = {})).matches ||
-        (e.router.matches = matches().map(({ route, path, params }) => ({
+        (e.router.matches = props.routerState.matches().map(({ route, path, params }) => ({
           path: route.originalPath,
           pattern: route.pattern,
           match: path,
           params,
           info: route.info
         }))));
   }
-  const params = createMemoObject(() => {
-    const m = matches();
-    const params: Params = {};
-    for (let i = 0; i < m.length; i++) {
-      Object.assign(params, m[i].params);
-    }
-    return params;
-  });
+
   const disposers: (() => void)[] = [];
   let root: RouteContext | undefined;
 
   const routeStates = createMemo(
-    on(matches, (nextMatches, prevMatches, prev: RouteContext[] | undefined) => {
+    on(props.routerState.matches, (nextMatches, prevMatches, prev: RouteContext[] | undefined) => {
       let equal = prevMatches && nextMatches.length === prevMatches.length;
       const next: RouteContext[] = [];
       for (let i = 0, len = nextMatches.length; i < len; i++) {
@@ -145,8 +132,7 @@ function Routes(props: { routerState: RouterContext; branches: Branch[] }) {
               props.routerState,
               next[i - 1] || props.routerState.base,
               createOutlet(() => routeStates()[i + 1]),
-              () => matches()[i],
-              params
+              () => props.routerState.matches()[i]
             );
           });
         }

src/routing.ts

@@ -1,4 +1,4 @@
-import { JSX, Accessor, getOwner, runWithOwner } from "solid-js";
+import { JSX, Accessor, runWithOwner } from "solid-js";
 import {
   createComponent,
   createContext,
@@ -91,7 +91,7 @@ export const useMatch = <S extends string>(path: () => S, matchFilters?: MatchFi
   });
 };
 
-export const useParams = <T extends Params>() => useRoute().params as T;
+export const useParams = <T extends Params>() => useRouter().params as T;
 
 export const useSearchParams = <T extends Params>(): [
   Partial<T>,
@@ -271,8 +271,8 @@ export function getIntent() {
 
 export function createRouterContext(
   integration: RouterIntegration,
+  branches: () => Branch[],
   getContext?: () => any,
-  getBranches?: () => Branch[],
   options: { base?: string; singleFlight?: boolean } = {}
 ): RouterContext {
   const {
@@ -306,9 +306,19 @@ export function createRouterContext(
   const referrers: LocationChange[] = [];
   const submissions = createSignal<Submission<any, any>[]>(isServer ? initFromFlash() : []);
 
+  const matches = createMemo(() => getRouteMatches(branches(), location.pathname));
+
+  const params = createMemoObject(() => {
+    const m = matches();
+    const params: Params = {};
+    for (let i = 0; i < m.length; i++) {
+      Object.assign(params, m[i].params);
+    }
+    return params;
+  });
+
   const baseRoute: RouteContext = {
     pattern: basePath,
-    params: {},
     path: () => basePath,
     outlet: () => null,
     resolvePath(to: string) {
@@ -337,10 +347,12 @@ export function createRouterContext(
   return {
     base: baseRoute,
     location,
+    params,
     isRouting,
     renderPath,
     parsePath,
     navigatorFactory,
+    matches,
     beforeLeave,
     preloadRoute,
     singleFlight: options.singleFlight === undefined ? true : options.singleFlight,
@@ -436,7 +448,7 @@ export function createRouterContext(
   }
 
   function preloadRoute(url: URL, preloadData: boolean) {
-    const matches = getRouteMatches(getBranches!(), url.pathname);
+    const matches = getRouteMatches(branches(), url.pathname);
     const prevIntent = intent;
     intent = "preload";
     for (let match in matches) {
@@ -478,9 +490,8 @@ export function createRouteContext(
   parent: RouteContext,
   outlet: () => JSX.Element,
   match: () => RouteMatch,
-  params: Params
 ): RouteContext {
-  const { base, location } = router;
+  const { base, location, params } = router;
   const { pattern, component, load } = match().route;
   const path = createMemo(() => match().path);
 
@@ -493,7 +504,6 @@ export function createRouteContext(
     parent,
     pattern,
     path,
-    params,
     outlet: () =>
       component
         ? createComponent(component, {

src/types.ts

@@ -145,7 +145,6 @@ export interface RouteContext {
   parent?: RouteContext;
   child?: RouteContext;
   pattern: string;
-  params: Params;
   path: () => string;
   outlet: () => JSX.Element;
   resolvePath(to: string): string | undefined;
@@ -161,8 +160,10 @@ export interface RouterUtils {
 export interface RouterContext {
   base: RouteContext;
   location: Location;
+  params: Params;
   navigatorFactory: NavigatorFactory;
   isRouting: () => boolean;
+  matches: () => RouteMatch[];
   renderPath(path: string): string;
   parsePath(str: string): string;
   beforeLeave: BeforeLeaveLifecycle;