#SPA Link is expand the url to endless?

13 messages · Page 1 of 1 (latest)

spark jungle
#

How does the code of your link / anchor element look like?

vivid crest
vivid crest
#

looool its crazy.... I have a helerFunctions.ts where I store functions like the slugify. When I click on the link my slugify seems to rerun the slugify

#

okay its not rerun but the spa seems to bug here

#

Okay thats crazy.... When I change it to a native a-tag I got the same problem

#

okay its seems that my recursive navigation occurs the issue

#

Maybe someone of you see a problem here:

import { component$, useContext } from "@builder.io/qwik";
import { useNavigation } from "~/routes/layout";
import { HiChevronDownMini } from "@qwikest/icons/heroicons";
import { StoreContext } from "~/context/StoreContextJS";
import { Link } from "@builder.io/qwik-city";
import { slugify } from "~/utils/helperFunctions";

type NavigationItem = {
  translated?: {
    breadcrumb?: string[];
    name?: string;
  };
  children?: NavigationItem[];
  cmsPageId?: string;
};

export default component$(() => {
  const context = useContext<any>(StoreContext);
  const navigation = useNavigation().value;
  console.log(navigation);
  const renderNavigation = (navItem: NavigationItem, key: number) => (
    <div class="" key={key}>
      <Link
        href={
          navItem.translated &&
          navItem.translated.breadcrumb &&
          navItem.translated.breadcrumb.length > 0
            ? slugify(navItem.translated.breadcrumb)
            : undefined
        }
        class="item-hover bg-red-300"
        onClick$={() => {
          context.internal.actualCmsPageId = navItem.cmsPageId;
        }}
      >
        {navItem.translated && navItem.translated.name}
        {navItem.children && navItem.children.length > 0 && (
          <HiChevronDownMini class="ml-3 inline-block" />
        )}
      </Link>
      {navItem.children && navItem.children.length > 0 && (
        <div class="hidden item-hover bg-red-500">
          {navItem.children.map((child, childIndex) =>
            renderNavigation(child, childIndex),
          )}
        </div>
      )}
    </div>
  );

  return (
    <div class="flex w-screen justify-between gap-5">
      <p class="bg-green-300 p-4">
        {JSON.stringify(context.internal.actualCmsPageId)}
      </p>
      {navigation.map((navItem: NavigationItem, navIndex: number) =>
        renderNavigation(navItem, navIndex),
      )}
    </div>
  );
});
vivid crest
#

OMFG....

spark jungle
#

does the output of slugify(navItem.translated.breadcrumb) start with a forward slash? if you are on page /vision and click a link to get to /test but end up on /vision/test, the forward slash is probably missing.

#

or your function doesnt generate a proper link

vivid crest
#

Yep! That was the point… I thought I already deleted this post 😅. At the moment I wrote OMFG… But big thanks for your help ♥️

spark jungle
#

yeah sometimes all we need is a rubberduck 🙂