Next.js 链接刷新页面

问题描述 投票：0回答：10

我有一个 Next.js 博客，只有 2 个路线：

/
和 
/posts/:slug
。

当我打开 

/posts/my-post-title
并单击反向链接（指向 
/
）时，一切都很好。页面加载速度快（无需刷新）。

当我打开 

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

链接：博客，来源

javascript reactjs refresh next.js
10个回答
16
投票

对于任何面临同样废话的人，我是：

Link
被错误地从
@material-ui/core

自动导入

你想要：

import Link from 'next/link'
9
投票

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

假设您想使用链接前往 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>
5
投票

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

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

而不是，

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

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

5
投票

我刚刚找到答案...

因为我在配置

中将
/posts/:slug
 动态映射到
/posts?slug=:slug （为了到达 
posts.jsx
），我需要对 链接组件执行相同的操作（通过属性 as）。

3
投票

**使用以下链接：**

<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>
1
投票

我遇到了类似的问题。就我而言，这是由于将 

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

不再刷新页面。

0
投票

只需使用这个：

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

参考：如果路线有动态路段

0
投票

就我而言，谷歌浏览器扩展存在问题。在隐身模式下尝试一下，如果有效，则问题出在您的浏览器扩展之一上。

-1
投票

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

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

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

删除头部标签

-1
投票

如果你使用next/link，你需要添加passHref属性

<Link href="YourLink" passHref>Name<Link>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.