Struggling with Router useParams() reactivity

Hello People!
I'm loving SolidJS, and I am working on a little "garden" like project, where I can write notes in MDX and have it all work without ever compiling anything.
I have an index.html page, that uses solid-js to render the MDX files client side.
This does work very nicely.
But while switching routes in the url bar of the browser, the site doesn't reload.
So, going from

localhost:8000/index.html/#/test.mdx

localhost:8000/index.html/#/test.mdx

localhost:8000/index.html/#/test2.mdx

localhost:8000/index.html/#/test2.mdx

doesn't work, unless I manually refresh the browser.
I tried multiple different approaches with createResource, createEffect, and createMemo, but I am not knowledgeable enough to know what the correct approach is.
I currently think this is a Usage Issue, not a Bug, that is why I decided to ask on Discord.
Any help would be appreciated! Have a nice day everyone.

<!DOCTYPE html>
<html>
  <body>
    <script type="module">
      // I had to remove the import statements because of Discord char limit

      const baseUrl = "http://localhost:8000";

      const RouteRenderer = (props) => {

        const params = useParams();

        const [mdxc] = createResource(params, async (p) => {
          const response = await fetch("/" + p.path);
          const filecontent = await response.text();
          const { default: MDXContent } = await evaluate(
            filecontent,
            { ...runtime,
              baseUrl: baseUrl,
              jsxImportSource: 'https://esm.sh/[email protected]/h/',
              remarkPlugins: [[remarkGfm, remarkMath]] }
          );
          return MDXContent;
        });

        return h("div", () => mdxc())
        };

      const App = () => {
        return h(HashRouter, {}, h(Route, { path:"/*path", component: RouteRenderer }));
      };

      render(App, document.body);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <script type="module">
      // I had to remove the import statements because of Discord char limit

      const baseUrl = "http://localhost:8000";

      const RouteRenderer = (props) => {

        const params = useParams();

        const [mdxc] = createResource(params, async (p) => {
          const response = await fetch("/" + p.path);
          const filecontent = await response.text();
          const { default: MDXContent } = await evaluate(
            filecontent,
            { ...runtime,
              baseUrl: baseUrl,
              jsxImportSource: 'https://esm.sh/[email protected]/h/',
              remarkPlugins: [[remarkGfm, remarkMath]] }
          );
          return MDXContent;
        });

        return h("div", () => mdxc())
        };

      const App = () => {
        return h(HashRouter, {}, h(Route, { path:"/*path", component: RouteRenderer }));
      };

      render(App, document.body);
    </script>
  </body>
</html>

SolidJS•2y ago•

19 replies

Willi

Struggling with Router useParams() reactivity

localhost:8000/index.html/#/test.mdx

localhost:8000/index.html/#/test.mdx

localhost:8000/index.html/#/test2.mdx

localhost:8000/index.html/#/test2.mdx

<!DOCTYPE html>
<html>
  <body>
    <script type="module">
      // I had to remove the import statements because of Discord char limit

      const baseUrl = "http://localhost:8000";

      const RouteRenderer = (props) => {

        const params = useParams();

        const [mdxc] = createResource(params, async (p) => {
          const response = await fetch("/" + p.path);
          const filecontent = await response.text();
          const { default: MDXContent } = await evaluate(
            filecontent,
            { ...runtime,
              baseUrl: baseUrl,
              jsxImportSource: 'https://esm.sh/[email protected]/h/',
              remarkPlugins: [[remarkGfm, remarkMath]] }
          );
          return MDXContent;
        });

        return h("div", () => mdxc())
        };

      const App = () => {
        return h(HashRouter, {}, h(Route, { path:"/*path", component: RouteRenderer }));
      };

      render(App, document.body);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <script type="module">
      // I had to remove the import statements because of Discord char limit

      const baseUrl = "http://localhost:8000";

      const RouteRenderer = (props) => {

        const params = useParams();

        const [mdxc] = createResource(params, async (p) => {
          const response = await fetch("/" + p.path);
          const filecontent = await response.text();
          const { default: MDXContent } = await evaluate(
            filecontent,
            { ...runtime,
              baseUrl: baseUrl,
              jsxImportSource: 'https://esm.sh/[email protected]/h/',
              remarkPlugins: [[remarkGfm, remarkMath]] }
          );
          return MDXContent;
        });

        return h("div", () => mdxc())
        };

      const App = () => {
        return h(HashRouter, {}, h(Route, { path:"/*path", component: RouteRenderer }));
      };

      render(App, document.body);
    </script>
  </body>
</html>

Struggling with Router useParams() reactivity

Struggling with Router useParams() reactivity

Similar Threads

Similar Threads

Similar Threads