Nextjs showing 'NextRouter was not mounted' error

Question

In this code, I am trying to get the value of input and trying to redirect it to '/search/${searchvalue}' where 'searchvalue' is the value of the input. However whenever I try to do so, I get an error saying 'Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted'

"use client"
import { useState } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';

export default function Navbar() {
  const [searchValue, setSearchValue] = useState('');
  const router = useRouter();

  const handleSearch = (e) => {
    e.preventDefault();
    router.push(`/search/${searchValue}`);
  };

  const handleInputChange = (e) => {
    setSearchValue(e.target.value);
  };

  return (
    <div id="navbarComp">
      <div id="navbar">
        <Link href="/">
          <div id="explore">
            <h1>Explore</h1>
          </div>
        </Link>
      </div>
      <div id="inputsearch">
        <form onSubmit={handleSearch}>
          <input
            className="dog"
            placeholder="Search"
            value={searchValue}
            onChange={handleInputChange}
          />
        </form>
      </div>
    </div>
  );
}

I tried multiple alternatives, none of which seemed to work.

Answer 1

Nevermind, I worked it out.

Here is the working code

"use client"
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';

export default function Navbar() {
  const [searchValue, setSearchValue] = useState('');
  const router = useRouter();

  const handleInputChange = (e) => {
    setSearchValue(e.target.value);
  };

  const handleSearch = (e) => {
    e.preventDefault();
    router.push(`/search/${searchValue}`);
  };

  return (
    <div id="navbarComp">
      <div id="navbar">
        <Link href="/">
          <div id="explore">
            <h1>Explore</h1>
          </div>
        </Link>
      </div>
      <div id="inputsearch">
        <form onSubmit={handleSearch}>
          <input
            className="dog"
            placeholder="Search"
            value={searchValue}
            onChange={handleInputChange}
            onSubmit={() => router.push(`/search/${searchValue}`)}
          />
        </form>
      </div>
    </div>
  );
}

Answer 2

try to pass the input event object to handleInputChange like:

...

<input
 className="dog"
 placeholder="Search"
 value={searchValue}
 onChange={(e)=> handleInputChange(e)}
/>

...