Why does my| useRouter function have no effect?

Question

I'm trying to build an App using nextjs 13 and the new App router feature (https://nextjs.org/blog/next-13-4) :

My problem is about navigation, I'm following the documentation but nothing happened

First of all, here's a minimal component :

"use client"
import { useRouter } from "next/navigation";

export default function Header() {
  const router = useRouter();
  return (
    <div>
      ...
      <Modal
        onClose={() => {
          console.log("Hello")
          router.push("/number")
        }}
      >
       ...
      </Modal>
    </div>
  )
}

When the modal get closed, in the console, I can find the "Hello" text, but I'm not getting routed

According to the documentation : https://nextjs.org/docs/app/api-reference/functions/use-router

router.push should work :/

Here's a codesandbox to see it in live : https://codesandbox.io/p/sandbox/fervent-minsky-fklfmj?file=%2Fstyles%2FLoginForm.module.css%3A19%2C1

Answer 1

Okay I've found my problem !

We can solve it really easilly, i've don't provide the whole code in my example.. but in the codesandbox everything are the same, the problem comes from Link, i've write my code like this :

<Link>
 <Modal onClick={(() => router.push(..))}>
</Link

But Link are catching router action and cancel them apparently..

Solution were to moves Modal outside of the div.. and basically move the router logic outside the Link