NextJS中点击提交按钮页面自动刷新问题求助

你代码里已经写了e.preventDefault()，但页面还是刷新，核心问题出在NextJS的组件渲染模式上：

你的HeroSection是客户端组件（加了"use client"），但父组件Home是默认的服务器组件（没加客户端指令）。当服务器组件渲染客户端组件时，表单的提交事件处理可能没有在客户端正确绑定，导致默认的表单提交刷新行为没被拦截。

修复方法： #

给Home页面也加上"use client"，让整个组件树都在客户端运行，事件处理就能正常生效。修改后的Home代码：

"use client";
import HeroSection from './HeroSection'
export default function Home() {
return (
<main className="flex h-screen flex-col items-center justify-between p-24">
<HeroSection/>
</main>
)}

另外确认下handleSubmit里的e.preventDefault()拼写没问题，从你贴的代码看是正确的，所以主要就是组件渲染上下文的问题。

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