NextRouter调用refresh()报错：属性不存在问题求助（附代码）

问题原因 #

你遇到的错误是因为Next.js路由API版本不匹配：

• next/router是Pages Router（旧路由系统）的API，它的NextRouter类型确实没有refresh()方法。
• refresh()是App Router（Next.js 13+推出的新路由系统）中useRouter的专属方法，需要从next/navigation导入。

解决方案 #

1. 切换路由API导入路径

将组件中的useRouter导入从next/router改为next/navigation：

// 替换前
import { useRouter } from "next/router";

// 替换后
import { useRouter } from "next/navigation";

2. 补充表单默认行为阻止（可选但推荐）

原代码未阻止表单默认提交行为，会导致页面自动刷新，建议在createPrompt函数开头添加：

e.preventDefault();

修改后的完整代码

"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";

export default function CreatePrompt() {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");

  const router = useRouter();

  const createPrompt = async (e: React.FormEvent) => {
    e.preventDefault();
    await fetch("http://127.0.0.1:8090/api/collections/prompts/records", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        title,
        content,
      }),
    });

    setContent("");
    setTitle("");

    router.refresh();
  };

  return (
    <form onSubmit={createPrompt}>
      <h3>Create a new Prompt</h3>

      <input
        type="text"
        placeholder="Title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />

      <textarea
        placeholder="Content"
        value={content}
        onChange={(e) => setContent(e.target.value)}
      />

      <button type="submit">Save prompt</button>
    </form>
  );
}

若仍使用Pages Router

如果你的项目基于Pages Router（未启用App Router），可以用以下方式模拟页面刷新效果：

// 替换router.refresh()为：
router.replace(router.asPath);

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