How to Abstract Routers using Classes

import { type Accessor, createSignal } from "solid-js";

import type { Router } from "./types";

export class SolidRouter implements Router {
  private router: typeof import("@solidjs/router") | undefined;
  public loaded: Accessor<boolean>;

  constructor() {
    const [loaded, setLoaded] = createSignal(false);

    this.loaded = loaded;

    import("@solidjs/router").then((routerModule) => {
      this.router = routerModule;
      setLoaded(true);
    });
  }

  pathname = () => {
    if (!this.router || !this.loaded()) {
      throw new Error("Router not loaded");
    }

    return this.router.useLocation().pathname;
  };

  getSearchParam = (key: string) => {
    if (!this.router || !this.loaded()) {
      throw new Error("Router not loaded");
    }

    const [searchParams] = this.router.useSearchParams();
    return searchParams[key] as string | null;
  };

  navigate = (path: string, options?: { replace?: boolean }) => {
    if (!this.router || !this.loaded()) {
      throw new Error("Router not loaded");
    }

    const _navigate = this.router.useNavigate();
    _navigate(path, options);
  };
}

Uncaught (in promise) Error: <A> and 'use' router primitives can be only used inside a Route.
    at invariant (utils.js?v=23f17e0f:29:15)
    at useRouter (routing.js?v=23f17e0f:9:32)
    at Module.useNavigate (routing.js?v=23f17e0f:42:34)
    at SolidRouter.navigate (SolidRouter.tsx:42:35)
    at runCallback (useLib.ts:120:14)