[DISCUSSION] Exploring component-based routing

Is your feature request related to a problem?

Modern frameworks tend to provide, built-in or on-side, routing solution. Qwik doesn’t.

Describe the solution you’d like

Implement a solution to allow using different components as views to replicate SPA routing behaviour.

Describe alternatives you’ve considered

HTML routing. However, for modern applications this is considered not-so-welcome experience.

Additional context

I’ve run my attempt at creating a routable app. And, this is what I got to:

import { useStore, component$, Host, Component } from "@builder.io/qwik";
import { Logo } from "../logo/logo";

import "./global.css";

export const HomePage = component$(({ greeting }: { greeting: string }) => {
  return <h1>Home Page {greeting}</h1>;
});
export const AboutPage = component$(({ greeting }: { greeting: string }) => {
  return <h1>About Page {greeting}</h1>;
});

export const ROUTES: Record<string, Component<any>> = {
  "/": HomePage,
  "/about": AboutPage,
};

export const App = component$(() => {
  const state = useStore({
    greeting: "world!",
    route: "/",
  });
  return (
    <Host class="my-app p-20">
      <Logo class="mb-10" />

      <h1 class="text-3xl mb-2">Congratulations Qwik is working!</h1>

      <a
        href="/#/about"
        onClick$={() => {
          state.route = "/about";
        }}
      >
        About
      </a>

      <li>
        Try interacting with this component by changing{" "}
        <input
          value={state.greeting}
          class="border-2 border-solid border-blue-500"
          placeholder="Write some text"
          onInput$={(event) => {
            const input = event.target as HTMLInputElement;
            state.greeting = input.value;
          }}
        ></input>
        .
      </li>
      <li>
      <li>
        Observe that the binding changes: <code>Hello {state.greeting}!</code>
      </li>

      {ROUTES[state.route]({
        greeting: state.greeting,
      })}
    </Host>
  );
});

The above example, brings routing which replicates something like Angular, where we define a map of routes, which Angular uses to replace a router-outlet with the appropriate component matching the route. Now, only if I figured my way through the following attempt:

  const state = useStore(() => {
    const route = global.window.location.hash.replace("#", "");
    return {
      greeting: "world!",
      route,
    };
  });

I would also be able to get the route from current document location.

Overall, does this get inline with how Qwik team is looking at routing? Does the team already have some other approach that can be shared with the community so might we collectively can shape it?

[nnelgxorz]

Oh, the really crazy part is you only get SPA behavior when you use a Link component. All your regular links are still MPA. You have both routing options available at the same time and can choose which one is best whenever you want. 👀

[IgnusG]

Thanks for the links, @nnelgxorz, and thanks for your attempt to work with me on this. I really appreciate it.

I’m sure I need to dig more into this. I’m considering manipulating internals of Qwik to see whether adding preventDefault to the callable created by Qwik would make a difference. This IMO is better approach that using proxy elements acting as links because this anti-semantic approach definitely is going to break in some way, and I’m hoping to reach a point where I can have client-side routing, that is in consistent with regular routing.

@mahmoudajawad You could use something like this inline (note the onclick which binds to the native dom’s click handler - this feels technically “illegal” but hey, JSX police ain’t watching):

router = useStore({ route: "/" });

<a 
  onclick={(e) => e.preventDefault()}
  onClick$={() => router.route = "/about"}
  href="/about"
>
  My Link
</a>
);

Or for a more type safe and less hacky solution using a wrapper component:

export const Link = component$(
  ({ onClickQrl, href }: { onClickQrl: QRL<() => void>; href: string }) => {
    const anchor = useRef<HTMLAnchorElement>();

    useClientEffect$(() => {
      anchor.current?.addEventListener("click", (event) => {
        event.preventDefault();
      });
    });

    return (
      <a onClickQrl={onClickQrl} href={href} ref={anchor}>
        <Slot />
      </a>
    );
  },
);