CODEWITHSUNDEEP
javascriptnext.jsnext.js13app-router
Ninhache
Ninhache

Reputation: 48

Why does my| useRouter function have no effect?

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

Upvotes: 0

Views: 64

Answers (2)

Ninhache
Ninhache

Reputation: 48

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

Upvotes: 0

Jawad Fadel
Jawad Fadel

Reputation: 820

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

Upvotes: 0

Related Questions