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

Answer 1

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

Answer 2

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