Skip to article
Documentation

src/components/navigation-link.tsx

Linked repository file from this build.

"use client";
import Link from "next/link";
import type { ComponentProps } from "react";
import { useReviewNavigation } from "@/features/reviews/provider";

/** Fetch routes on demand: server-rendered page data must not run for every visible link. */
export function NavigationLink({ onNavigate, onClick, ...props }: ComponentProps<typeof Link>) {
  const { navigate } = useReviewNavigation();
  return (
    <Link
      prefetch={false}
      {...props}
      onClick={(event) => {
        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0)
          return;
        onClick?.(event);
      }}
      onNavigate={(event) => {
        let canceled = false;
        onNavigate?.({
          preventDefault: () => {
            canceled = true;
            event.preventDefault();
          },
        });
        if (canceled) return;
        const href = typeof props.href === "string" ? props.href : null;
        if (!href || !href.startsWith("/") || href.startsWith("//")) return;
        event.preventDefault();
        void navigate(href);
      }}
    />
  );
}