javascript - 为什么在单击仅调用 API 端点然后导航到正确页面的 next.js `Link` 时出现半秒的 404？

Question

你好，

我在这里遵循了这个指南:https://auth0.com/blog/next-js-authentication-tutorial/ (将带有护照的身份验证添加到 next.js)

我有一个简单的问题。

当我点击来自 next.js 的“/login”链接时，我会看到这个错误持续大约 200 毫秒:

Request URL: http://localhost:3000/_next/static/development/pages/login.js Request Method: GET Status Code: 404 Not Found

然后它会自动重定向到主页的根目录，因为它随后已成功通过身份验证(使用护照 facebook)。

我还在问为什么我会暂时看到这个错误？

这是客户端链接:

{!user && (
        <Link href="/login">
          <a>Log In</a>
        </Link>
      )}

这是服务器路由:

router.get("/login", passport.authenticate("facebook"));

router.get("/callback", (req, res, next) => {
  passport.authenticate("facebook", (err, user) => {
    if (err) return next(err);
    if (!user) return res.redirect("/login");
    req.logIn(user, err => {
      if (err) return next(err);
      res.redirect("/");
    });
  })(req, res, next);
});

是什么触发了这个错误？

我的猜测:

因为我使用 next.js 中的“链接”组件，应用程序会尝试查找名称为“Login.js”的页面。由于它不存在，因为它只是一个服务器 api，所以它会显示该错误。如果我是对的，如何摆脱它？谢谢大家!

到目前为止我尝试了什么:

我刚在他们的文档中找到这个:https://github.com/zeit/next.js/#disabling-file-system-routing

但这会破坏应用程序，因为它无法再解析任何页面。所以我猜不是这样 :D

Answer 1

我通过不使用 Link 修复了它但只使用 <a href="/login">Login</a>

不知道这是否是正确的方法，所以我不会投票支持解决这个问题。如果这是执行此操作的正确方法，也许有人可以详细说明。

这是我的导航现在的样子:

<div>
      <Link href="/">
        <a>Thoughts!</a>
      </Link>
      {user && (
        <>
          <Link href="/share-thought">
            <a>New Thought</a>
          </Link>
          <Link href="/profile">
            <a>Profile</a>
          </Link>

            <a href="/logout">Logout</a>

        </>
      )}
      {!user && <a href="/login">Log In</a>}
    </div>

(注销也没有使用 Link 因为我在这里也遇到了这个问题，我认为也是因为 pages 文件夹中没有 Logout.js)。