router.push() is not working as expected NextJS

Question

I am trying to redirect the user to the search results, but router.push() is not working apparently. I changed url to page that don't exist and the route changes, but when it comes to using the url of page already created, nothing happens.

I tried doing something like this, but it's not working either.

import { useRouter } from 'next/router';
const router = useRouter();

const search = () => {
    router.push('/search');
    };
}

@Fr0z3n7 <button onClick={search} className={"btn"}>Search</button> — Thamagik
– Thamagik, Commented Apr 21, 2022 at 23:04
Hi, please check the answer stackoverflow.com/a/57474576/7369564 . i hope this helps. — Saurabh
– Saurabh, Commented Apr 22, 2022 at 4:30
@Saurabh yes it is. I explained further my problem here link — Thamagik
– Thamagik, Commented Apr 25, 2022 at 11:19

Nicolai Lissau · Accepted Answer · 2022-12-31 08:59:37Z

23

If you are using Nextjs13, please be aware to import useRouter from next/navigation:

❌ import { useRouter } from 'next/router';

to:

✅ import { useRouter } from 'next/navigation';

Documentation link

edited Dec 31, 2022 at 8:59

answered Oct 31, 2022 at 12:39

Nicolai Lissau

8,4327 gold badges52 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lee Harrison Over a year ago

Do you have a link to documentation that points this out?

Nicolai Lissau Over a year ago

Good point. Added link.

bsplosion Over a year ago

This only applies if you're migrating from the pages directories to app directories - if you're still using pages, this doesn't apply.

Pencilcheck Over a year ago

doesn't make any difference, still doesn't work.

Thamagik · Accepted Answer · 2022-04-27 00:21:13Z

17

The solution here is to prevent default function by doing something like this:

import { useRouter } from 'next/router';
const router = useRouter();

const Search = (e) => {
        e.preventDefault()
        router.push("/search");
    };

answered Apr 27, 2022 at 0:21

Thamagik

3971 gold badge2 silver badges10 bronze badges

4 Comments

Pencilcheck Over a year ago

doesn't fix it for me, worked the first time, doesn't work on subsequent times...

Jason Over a year ago

Thank you!! I knew it would be my own stupidity. Glad someone else made the same mistake :)

squillman Over a year ago

The preventDefault() was the trick for me with a client component as well, using next/navigation

adedaniel Jan 27 at 10:07

In my case, I forgot that the button to trigger Router.push was inside a form, and so clicking the button triggered the form submission rather than routing to the page I wanted it to go to. The preventDefault() solved that for me

Ajith · Accepted Answer · 2024-01-15 05:47:16Z

2

From next js 13 onwards use router should be imported from next/navigation

✅ import { useRouter } from 'next/navigation';

calling router.push for updating the route in shallow(eg: updating query params on the client) might cause the page to reload. Use native APIs (window.history) for handling them.

  window.history.pushState(null, '', `?${...YOUR_QUERY_PARAMS}`)

or

 window.history.replaceState(null, '',NEW_PATH)

refer https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating

answered Jan 15, 2024 at 5:47

Ajith

902 silver badges9 bronze badges

1 Comment

Sushil Dhayal Jun 14 at 5:31

Not exactly. In Next.js 13 and later, the new useRouter from next/navigation is intended for app directory (app router) components, which are typically server components or client components under the /app directory. If you are using the pages directory (as in your code: login.tsx), you should continue to use: import { useRouter } from 'next/router'; If you are using the app directory (with React Server Components and Client Components), then use: import { useRouter } from 'next/navigation';

Thopz · Accepted Answer · 2023-07-08 16:58:08Z

1

Just replace it with window.location.href = "/"

answered Jul 8, 2023 at 16:58

Thopz

432 bronze badges

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

MDompekidis Over a year ago

This is the correct answer, because nextjs router is buggy

Cris Cirhuza · Accepted Answer · 2024-09-16 10:19:24Z

0

Adding an prevent default instruction on the event param will solve the problem since the button is considered as of submit type by default.

answered Sep 16, 2024 at 10:19

Cris Cirhuza

303 bronze badges

Collectives™ on Stack Overflow

router.push() is not working as expected NextJS

5 Answers 5

4 Comments

4 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

4 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related