Next.js 链接刷新页面

Question

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

当我在/posts/my-post-title，点击后面的link（到/），一切正常。页面加载速度很快（无刷新）。

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

Answer 1

我刚找到答案...

因为我动态映射 /posts/:slug 到 /posts?slug=:slug in my config (in order to reach posts.jsx), I need to do the same with the Link component (via the property as).

Answer 2

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

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

而不是

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

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

Answer 3

我以前遇到过这个问题，我以为我已经解决了，但是上面的 none 再次帮助我完全解决了这个问题，所以我发布了我的解决方案。

假设您想使用 link.

去 slot/[key] 路线

然后，在 pages 文件夹中创建一个名为 slot 的文件夹，并在其中创建一个名为 [key].js 的文件，注意：不要忘记将 [].

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

现在，在使用 Link 的同时使用它，

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

Answer 4

** 使用 link 如下：**

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

而不是

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

Answer 5

我运行遇到了类似的问题。在我的例子中，这是由于 <a> 标签嵌套在另一个组件中，而不是 Link.

的直接子标签

所以我有：

<Link href='/something' passHref>
  <MyComponent />
</Link>

其中 MyComponent 接受 href 作为道具，看起来像：

<a href={ href }>
  Good things
</a>

乍一看这确实有效，因为 href 已正确传递给锚标记。但是当单击 link 时，它会导致整个页面刷新。一旦我将 Link 和 a 标记移动到与直接 parent/child 相同的组件中，它就解决了这个问题。所以现在我在一个组件中有了所有的标准设置：

<Link href='/something' passHref>
  <a>
    Good things
  </a>
</Link>

不再刷新页面。

Answer 6

对于遇到同样的废话的任何人：Link 被错误地从 @material-ui/core

自动导入

你想要：

import Link from 'next/link'

Next.js 链接刷新页面

Next.js links refresh the page

javascript

refresh

reactjs

next.js