Next.js 链接刷新页面

Question

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

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

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

链接：博客，来源

Answer 1

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

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

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

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

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

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

Answer 2

我刚刚找到了答案...

因为我在我的配置中动态映射/posts/:slug到/posts?slug=:slug （为了到达posts.jsx ），我需要对Link 组件（通过属性as ）做同样的事情。

Answer 3

对于任何面临同样胡说八道的人： Link错误地从@material-ui/core自动导入

你要：

import Link from 'next/link'

Answer 4

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

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

代替，

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

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

Answer 5

**使用以下链接：**

<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 6

我遇到了类似的问题。 就我而言，它是由<a>标签嵌套在另一个组件中引起的，而不是作为Link的直接子级。

所以我有：

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

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

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

乍一看，这确实有效，因为 href 已正确传递给锚标记。 但是当点击链接时它会导致整页刷新。 有一次，我感动的Link和a标签是在同一组件直接父/子，它解决了这个问题。 所以现在我在一个组件中拥有所有标准设置：

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

没有更多的页面刷新。

Answer 7

只需使用这个：

 <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
        <a>{post.title}</a>
 </Link>

参考：如果路线有动态段

Answer 8

如果您使用 Head 标签，那么这将刷新您的页面

由于 Head 标签，它会刷新您的页面

   <Head>
    <Link href="YourLink"> <Link>
     // Other codes...
    </Head>

移除 Head 标签

Next.js 链接刷新页面

问题描述

8 个解决方案

解决方案1
6 2020-05-20 06:58:23

解决方案2
3 已采纳 2019-06-29 13:10:49

解决方案3
3 2022-04-05 07:06:06

解决方案4
2 2020-05-15 09:41:53

解决方案5
0 2020-10-06 08:29:52

解决方案6
0 2021-12-01 17:48:14

解决方案7
0 2022-07-21 09:32:27

解决方案8
0 2022-12-27 08:58:44

Next.js 链接刷新页面

问题描述

8 个解决方案

解决方案1 6 2020-05-20 06:58:23

解决方案2 3 已采纳 2019-06-29 13:10:49

解决方案3 3 2022-04-05 07:06:06

解决方案4 2 2020-05-15 09:41:53

解决方案5 0 2020-10-06 08:29:52

解决方案6 0 2021-12-01 17:48:14

解决方案7 0 2022-07-21 09:32:27

解决方案8 0 2022-12-27 08:58:44

解决方案1
6 2020-05-20 06:58:23

解决方案2
3 已采纳 2019-06-29 13:10:49

解决方案3
3 2022-04-05 07:06:06

解决方案4
2 2020-05-15 09:41:53

解决方案5
0 2020-10-06 08:29:52

解决方案6
0 2021-12-01 17:48:14

解决方案7
0 2022-07-21 09:32:27

解决方案8
0 2022-12-27 08:58:44