NextJS <Link> 将我带到 404

Question

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

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

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

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

请注意，如果我第一次导航，它将显示 404 大约一秒钟，然后该页面将弹出。但是，如果我导航出该页面然后导航回来，那么它就会卡在 404 上，第 2 次，第 3 次，第 4 次等等。

我知道我只是误会了一些 nextjs 的东西，因为如果我使用标签而不是标签，路由工作正常

如有任何帮助，我们将不胜感激。

Answer 1

在 Link 标签内使用 'a' 标签。

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

下一个js的最新版本：

https://nextjs.org/docs/api-reference/next/link

Answer 2

你可以试试这个。

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

Answer 3

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

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

NextJS <Link> 将我带到 404

NextJS <Link> Takes me to 404

javascript

routes

reactjs

react-router

next.js