使用import { useRouter } from "next/router";asimport { useRouter } from "next/navigation";抛出“类型为‘{pathname: string; query: {search: string;};}’的参数不能分配给类型为‘string’的参数。”
import { useRouter } from "next/router";
import { useRouter } from "next/navigation";
const router = useRouter(); const [searchInput, setSearchInput] = useState(""); const search = (e) => { router.push({ pathname: '/search', query: { search: searchInput, }, }) }
NextJS文档
Froms 文档:“组件在 Next.js 应用程序之外使用了 useRouter,或者在 Next.js 应用程序之外呈现。在使用 useRouter 钩子的组件上进行单元测试时可能会发生这种情况,因为它们未配置 Next.js 的上下文。”
看到的错误消息表明 Next.js 中钩子的类型推断存在问题。useRouter似乎useRouter中的钩子"next/navigation"与 中的钩子具有不同的类型签名"next/router",并且 TypeScript 无法推断路由器对象的正确类型。
useRouter
"next/navigation"
"next/router"
要修复此问题,您应该确保从正确的位置导入useRouter,即"next/router"。以下是更正后的导入语句:
useRouter一旦从导入"next/router",TypeScript 应该能够正确推断路由器对象的类型,并且错误应该得到解决。