Willi
Willi
PostsComments
SSolidJS
Created by Willi on 4/6/2024 in #support
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 to 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>
20 replies