Error: <A> and 'use' router primitives can be only used inside a Route.

[solid-component]

Describe the bug

https://solid-component.github.io/guya-ui/#/
i use HashRouter, and vite config base is guya-ui, i got more err.When I switched paths a few times，i got a err:TypeError: Cannot read properties of null (reading 'push')

import { MDXProvider } from "solid-mdx";
import { MDXComponents } from "./components/mdx-component";
import { HashRouter as Router } from "@solidjs/router";
import "./index.css";
import { routes } from "./routes";
import { createStore } from "solid-js/store";
import Root from "./layout/root";

export const seedTokenStore = createStore({
  colorPrimary: "#1890ff",
});
export default function App() {
  return (
    <MDXProvider components={MDXComponents}>
      <Router root={Root}>{routes}</Router>
    </MDXProvider>
  );
}

layout/root

import { Layout, ThemeProvider, seedTokenStore } from "guya-ui";
import Navbar from "./navbar";
import { Show, Suspense, children, createEffect } from 'solid-js'
import { Sider } from "./sider";
import { Anchor } from "./anchor";
import { useLocation } from '@solidjs/router';

export default function Root(props) {
  const location = useLocation()
  createEffect(() => {
    console.log('pathname', location.pathname)
  })
  const [seedToken] = seedTokenStore;
  return (
    <ThemeProvider value={{
      seedToken
    }}>
      <Layout>
        <Layout.Header
          style={{
            background: "#fff",
            position: "sticky",
            "z-index": 99,
            top: "0",
          }}
        >
          <Navbar />
        </Layout.Header>
        <Show
          when={props.location.pathname === "/"}
          fallback={
            <div
              style={{
                "padding-left": "250px",
                "padding-top": "64px",
              }}
            >
              <Layout.Sider
                style={{
                  position: "fixed",
                  left: 0,
                  top: "64px",
                  width: "250px",
                }}
              >
                <Sider />
              </Layout.Sider>
              <Layout.Content
                style={{
                  padding: "48px 32px",
                  display: "flex",
                }}
              >
                <div style={{ width: "100%" }}>
                  <Suspense>{props.children}</Suspense>
                </div>
                <aside class="anchor-side" style={{ width: "300px" }}>
                  <Anchor />
                </aside>
              </Layout.Content>
            </div>
          }
        >
          <Suspense>{props.children}</Suspense>
        </Show>
      </Layout>
    </ThemeProvider>
  );
};

vite.config.ts

export default defineConfig({
  plugins: [
    vinxiMdx.withImports({})({
      caches: {},
      jsx: true,
      jsxImportSource: "solid-js",
      providerImportSource: "solid-mdx",
      remarkPlugins: [remarkGfm],
      rehypePlugins: [
        rehypeSlug,
        rehypeComponent,
        [
          rehypeShiki,
          {
            themes: {
              light: "vitesse-light",
              dark: "vitesse-dark",
            },
          },
        ],
      ]
    }),
    solid({
      extensions: [".mdx", ".md"],
      babel: {
        plugins: ["@babel/plugin-syntax-top-level-await"],
      },
    }),
  ],
  base: '/guya-ui',
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"), // 将 @ 映射到项目的 src 目录
      "~": path.resolve(__dirname, "src"), // 将 ~ 映射到项目的 src 目录
    },
  },
  build: {  sourcemap: false },
});

routes:

import { lazy } from "solid-js";

export const routes: any[] = [
  {
    path: "/",
    component: lazy(() => import("../pages")),
  },
  {
    path: "guide",
    children: [
      {
        path: "installation",
        component: lazy(() => import("../pages/guide/installation.mdx")),
      },
      {
        path: "theme",
        component: lazy(() => import("../pages/guide/theme.mdx")),
      },
      {
        path: "changelog",
        component: lazy(() => import("../pages/guide/changelog.mdx")),
      },
    ],
  },
  {
    path: "components",
    children: [
      {
        path: "button",
        component: lazy(() => import("../pages/components/button.mdx")),
      },
      {
        path: "*404",
        component: lazy(() => import("../pages/404")),
      },
    ],
  },
  {
    path: "*404",
    component: lazy(() => import("../pages/404")),
  },
];

Your Example Website or App

https://solid-component.github.io/guya-ui/#/

Steps to Reproduce the Bug or Issue

1. opened https://solid-component.github.io/guya-ui/#/, got error: Error: and 'use' router primitives can be only used inside a Route.
2. click 指南 -> click 组件 -> click 指南，got error: TypeError: Cannot read properties of null (reading 'push')

Expected behavior

Normal page rendering

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[solid-component]

It works locally, but not when it's packed

[solid-component]

resolved：i used monorepo, The cause may be is Dependency cache，I took the project out separately, packaged it and published it, and it was back to normal

[ryansolid]

Ok good to know. Or maybe duplicate versions also possible? I guess nothing to fix here then?