Question

我有一个Next.js博客，它只有两条路线：/和/posts/:slug。

当我在/posts/my-post-title上并单击后退链接（指向/）时，一切都很好。该页面加载速度很快（无刷新）。

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

链接：blog，sources

Answer 1

我以前有这个问题，我以为我已经解决了，但是以上都不是我所能完全解决的，所以我发布了解决方案。

假设您要使用链接转到插槽/ [密钥]路由。

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

在[key] .js文件夹中，您可以简单地导出要呈现的组件。有很多方法可以解决，我们现在就不讨论它。

现在，在使用链接时，以这种方式使用它，

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

Answer 2

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

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

而不是

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

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

Answer 3

**使用如下链接：**

<div class="callout left">
    whole border is primary color
</div>
<br>
<div class="callout top border-warning">
    same problem as above
</div>

代替

<Link href="/shop/[pid]" as={`/shop/${id}`}>
                        <a>Shop by menu</a>
                    </Link>

Answer 4

我刚刚找到了答案...

因为我动态地将/posts/:slug映射到/posts?slug=:slug in my config（为了到达posts.jsx），所以我需要对the Link component做同样的操作（通过属性as）。

Next.js链接刷新页面

4 个答案: