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

Can you specify which library you have used to import Modal component? — Aravinda Meewalaarachchi, Jun 23 '23 at 09:19
can you put that implementation as well? better a sandbox link with working implementation. — Aravinda Meewalaarachchi, Jun 23 '23 at 10:02

score 0 · Answer 1 · answered Jun 23 '23 at 09:02

0

You forget to add "use client" top of the file
console.log("Hello") it will log in server side

Code must be like:

"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>
  )
}

answered Jun 23 '23 at 09:02

Jawad Fadel

550
6
12

You're right, i didnt put "use client" on my post, but i've the "use client" in local, let me edit my post ! – Ninhache Jun 23 '23 at 09:03

score 0 · Accepted Answer · answered Jun 26 '23 at 12:50

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

Why does my| useRouter function have no effect?

2 Answers2