Next.js嵌套组件中onSubmit函数无法执行问题排查

问题根源：你把Login组件放在了NavbarItem的Link组件内部，点击表单的submit按钮时，会优先触发Link的跳转行为，直接中断了form的onSubmit事件，导致handleSubmit无法执行。而直接渲染Login组件时，它不在Link的包裹范围内，所以事件能正常触发。

修复方案：调整NavbarItem的结构，将子菜单（subMenuItems）移出Link组件的包裹范围，让Link只负责导航文本的跳转功能：

修改后的NavbarItem.jsx代码：

import React from 'react';
import Link from 'next/link';

export const NavbarItem = ({ href, text, subMenuItems }) => {
  
  return (
    <li className='navbar--list__item'>
      {/* Link仅包裹导航文本部分 */}
      <Link className='link-effect' href={href}>
        <span className='link-effect-inner'>
          <span className='link-effect-l'>
            <span>{text}</span>
          </span>
          <span className='link-effect-r'>
            <span>{text}</span>
          </span>
          <span className='link-effect-shade'>
            <span>{text}</span>
          </span>
        </span>
      </Link>
      {/* 子菜单放在Link外部 */}
      {subMenuItems && Array.isArray(subMenuItems) ? (
        <ul className='navbar--list__item--list'>
          {subMenuItems.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      ) : null}
    </li>
  );
};

修改后，Login组件的表单不再处于Link的点击区域内，点击submit按钮会正常触发onSubmit事件，同时导航文本的跳转功能不受影响。

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