为什么我无法在 next.js 页面中触发表单提交事件？

我在页面/登录中有一个非常简单的登录表单。但是，当我尝试提交它时，提交事件似乎永远不会被调用，并且默认事件也不会被阻止。

const login = () => {
  return (
    <Fragment>
      <form
        onSubmit={async e => {
          // never called
          debugger;
          e.preventDefault();
        }}
      >
        <div>
          <label>Email:</label>
          <input type="text" name="email" />
        </div>
        <div>
          <label>Password:</label>
          <input type="password" name="password" />
        </div>
        <div>
          <input type="submit" value="Log In" />
        </div>
      </form>
      <div>
        Don't have an account?
        <Link href="/signup">
          <a>Sign up here</a>
        </Link>
      </div>
    </Fragment>
  );
};

export default login;

我预计调试器会被命中，并且默认事件会被阻止，但两者都没有发生。我在 React 中做过很多次类似的事情，但我对 next.js 相对较新，所以我认为这一定是由于 next 的一些我不理解的行为造成的。任何帮助表示赞赏！

编辑* 好的，我找到了导致该错误的原因。在服务器上，我使用 jwt auth，因此我有此代码来防止未经身份验证的用户查看任何页面。

../server/app.js（主服务器模块）

server.use(
      jwt({
        secret: process.env.JWT_SECRET
      }).unless({ path: ["/login", "/signup", "/graphql"] })
    );

    server.use((err, req, res, next) => {
      if (err.name === "UnauthorizedError") {
        return res.redirect("/login");
      }
      next();
    });

当我注释掉该代码块时，客户端上的表单将正常处理。不知道为什么会产生影响，但无论如何，我需要该代码，所以我很想知道为什么它会导致问题！

这是因为你添加了监听器onSubmit在您的表单上，但那里没有提交事件。 它与您的 html 组件相关，您应该使用而不是使用 next/link 和标签 a提交按钮触发onSubmit event.

由于您正在使用 onSubmit 事件，因此您需要删除 Link 组件并将其替换为 NextJS 中的 Router 组件，该组件将在您的内部调用onSubmit功能。

import Router from "next/router";

const login = () => {
  return (
    <Fragment>
      <form
        onSubmit={async e => {
          // never called
          debugger;
          e.preventDefault();
          Router.push("/signup");
        }}
      >
        <div>
          <label>Email:</label>
          <input type="text" name="email" />
        </div>
        <div>
          <label>Password:</label>
          <input type="password" name="password" />
        </div>
        <div>
          <input type="submit" value="Log In" />
        </div>
      </form>
      <div>
        Don't have an account?
        <button type="submit">Sign up here</button>
      </div>
    </Fragment>
  );
};

export default login;