NextJS <Link> 带我到 404答案

【问题标题】：NextJS <Link> Takes me to 404NextJS <Link> 带我到 404
【发布时间】：2021-12-24 11:33:01
【问题描述】：

我在网上看到过这个问题我正在尝试实施建议的解决方案，但仍然不适合我。所以我为重复道歉。

无论如何，我有一个简单的链接标签，它会抛出 404

<Link className={classes.navbarDesktopMenuButton} href="/profile/[id]" as={`/profile/${username}`}>
  <Button>
    <strong className={classes.navbarDesktopMenuButton}>My Profile</strong>
  </Button>
</Link>

我很确定我正在导航到正确的路线，所以不知道为什么我仍然收到 404。

请注意，如果我第一次导航它会 404 像一秒钟然后页面会弹出。但是，如果我导航出页面然后导航回来，那么它就会卡在 404 上，第二次，第三次，第四次等等。

我知道我只是误解了它的一些 nextjs 事情，因为如果我使用标签而不是标签

，路线工作正常

任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs routes react-router next.js

【解决方案1】：

你可以试试这个。

<Link
    className={classes.navbarDesktopMenuButton}
    href={{
        pathname: "/profile/[id]",
        query: { id: username },
    }}
    as={`/profile/${username}`}
>
    <Button>
        <strong className={classes.navbarDesktopMenuButton}>My Profile</strong>
    </Button>
</Link>

【讨论】：

当我这样做时仍然达到 404
@benjamin852 它对我有用我测试过你在页面目录中有配置文件文件夹吗？请检查一下，可能会有所帮助。
嘿。再次感谢您的回复，事实证明我的代码和您的代码一样正确。我的组件存在问题，我仍然需要进一步调查，但不要认为我的链接是问题再次感谢您的回答，并将您的代码标记为正确。跨度>

【解决方案2】：

在链接标签内使用“a”标签。

https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes

【讨论】：

试图取出按钮并用标记替换，但仍然命中 404

【解决方案3】：

您可能必须使用锚标记而不是按钮组件，但此代码的其余部分应该可以正常工作！

<Link className={classes.navbarDesktopMenuButton} href={`/profile/${username}/`}>
    <Button>
        <strong className={classes.navbarDesktopMenuButton}>My Profile</strong>
    </Button>
</Link>

【讨论】：

将其切换到中的标记，但仍然达到 404