Next.js 链接刷新页面

Question

我有一个 Next.js 博客，只有 2 个路由：/和/posts/:slug.

当我打开时/posts/my-post-title，我点击返回链接（到/），一切都很好。页面加载速度快（无刷新）。

当我打开/并单击 时/posts/my-post-title，页面会刷新，但我不知道为什么。有什么建议吗？

链接：博客，来源

Answer 1

对于任何面临同样废话的人，我是：Link被错误地自动导入@material-ui/core

你要：

import Link from 'next/link'

Answer 2

我之前遇到过这个问题，我以为我已经解决了，但以上都没有帮助我完全解决问题，所以我发布了我的解决方案。

假设您想使用链接转到 slot/[key] 路由。

然后，在 pages 文件夹中创建一个带有名称槽的文件夹，并在其中创建一个名为 [key].js 的文件，注意：不要忘记放置 []。

在 [key].js 文件夹中，您可以简单地导出要渲染的组件。这有很多方法，我们现在不赘述。

现在，在使用 Link 时，请以这种方式使用它，

                 <Link
                      href={'/slot/[key]'}
                      as = {`/slot/${your_dynamic_variable}`}
                    >
                      <a>
                        Go to the slot route
                      </a>
                    </Link>

Answer 3

我刚刚找到了答案...

因为我在配置中动态映射/posts/:slug（为了到达），所以我需要对Link 组件执行相同的操作（通过as属性）。/posts?slug=:slug posts.jsx

Answer 4

在 next.js 中使用 Link 时要记住的一件事是不要在开头添加“/”，即

               <Link
                  href="nameoflink"
                >
                  <a>
                   Click Me
                  </a>
                </Link>

代替，

                   <Link
                      href="/nameoflink"
                    >
                      <a>
                       Click Me
                      </a>
                    </Link>

如果在开头添加“/”，页面会刷新。但是，如果该链接位于整个应用程序中可访问的某些通用组件（例如导航栏）中，则需要在开头添加“/”，在这种情况下，请在开头添加“/”。尝试一下，如果它对你有用那就太好了。我只是觉得我应该分享。