Avoid page reload when clicking on links

[junogueira]

trafficstars

Description

Is there a way to avoid a page reload when clicking on links?

I'm using the full example and apparently it's the default behavior. But when I included a few <Link> directly on my page it seems to work as expected.

I'm new to Next.js / React so I might be missing something basic here.

Thanks.

[bmitchinson]

Are you able to post your repo, and link to your NotionRenderer component with that code? I am having the same issue with Images, where nextImage isn't taking effect, despite <Image> working fine directly on the page. #447

[junogueira]

I was using the full example as it is, no changes.

[Armster15]

Slightly hacky but I found this works:

import type { AProps } from "react-html-props";
import Link from "next/link";

const PageLink = ({ href, children, ...props }: AProps) => {
  return (
    <Link href={href}>
      <a {...props}>{children}</a>
    </Link>
  );
};

const components = React.useMemo(
  () => ({
    PageLink: PageLink,
  }),
  []
);

The key thing to note is we are passing in PageLink into components, not nextLink. Digging through the source code I found that the library uses PageLink to render links.

Note that I tested this on Next 12 only. Next 13 changed how Link works and I have not yet tested if it works on there or not.

I'm not sure if this has any unintended side effects but so far it seems to be working fine for me.