Next.js报错‘NextRouter was not mounted’问题求助

问题出在你误用了Pages Router的路由API。在Next.js 13+的App Router体系中，next/router包的useRouter已经不再适用，需要改用next/navigation提供的useRouter。

修改步骤： #

• 将useRouter的导入路径从next/router替换为next/navigation
• 可选：对搜索值进行URL编码，避免特殊字符导致路由异常
• 可选：添加非空判断，防止提交空值跳转

修改后的完整代码 #

"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 handleSearch = (e) => {
    e.preventDefault();
    // 非空判断+URL编码
    if (searchValue.trim()) {
      router.push(`/search/${encodeURIComponent(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>
  );
}

补充说明 #

• encodeURIComponent能处理搜索内容中的空格、&、?等特殊字符，确保路由跳转的正确性
• 如果你是在Pages Router项目中开发，报错可能是组件未被正确标记为客户端组件，但你已经添加了"use client"指令，所以更可能是App Router下的API混用问题

内容的提问来源于stack exchange，提问作者ichigyuu