Router context null

Question

Hello !
I am gonna try to make it easy to understand :
-I needed to add a 1 second delay between a clicked Linked and the navigation actually happening
-I decided that the best way would be to copy the Next <Link /> component and modify it
-I did however it did not work
-After few debugging I realised problème was coming from the line const router = useContext(RouterContext) that return a null router (line https://github.com/vercel/next.js/blob/canary/packages/next/src/client/link.tsx#L283)
-I don't know why "there is no RouterContext"

If there is anyone that could help me I'd appricate

Also, makes me wonder is I have the same problem when I use the native <Link /> component, because if I have, my pages wouldn't be prefetched...
Thanks

Eurasian Blackbird · Answer

I kind of "fixed" my problem by doing an alternative like this :

"use client";

import Link from "next/link";
import type { MouseEvent } from "react";
import { useRouter } from "next/navigation";

export default function TransitionLink({
  href,
  scroll,
}: {
  href: string;
  scroll?: boolean;
}) {
  const router = useRouter();

  function linkClicked(e: MouseEvent<HTMLAnchorElement>) {
    e.preventDefault();

    setTimeout(() => {
      router.push(href, { scroll });
    }, 1000);
  }

  return (
    <Link href={href} onClick={linkClicked} scroll={scroll}>
      Hello
    </Link>
  );
}

But im not really sure I'm still getting all native Link features. If someone has a better option I'll take it

Router context null

1 Reply