Next.js 链接刷新页面
[英]Next.js links refresh the page
问题描述
I have a Next.js blog with only 2 routes: / and /posts/:slug .
我有一个 Next.js 博客，只有 2 条路线： /和/posts/:slug 。
When I'm on /posts/my-post-title , and I click on the back link (to / ), all is fine.当我在/posts/my-post-title上时，我点击后退链接（到/ ），一切都很好。 The page loads fast (no refresh).页面加载速度快（无刷新）。
When I'm on / , and I click on /posts/my-post-title , the page refreshes and I can't figure out why.当我打开/并单击/posts/my-post-title时，页面会刷新，但我不知道为什么。 Any suggestion?有什么建议吗？
8 个解决方案
解决方案1
6 2020-05-20 06:58:23
I had this issue before, I thought I fixed it but again none of the above helped me solve the issue completely so I'm posting my solution.我之前遇到过这个问题，我以为我已经解决了，但以上都没有帮助我完全解决问题，所以我发布了我的解决方案。
Suppose you want to go to slot/[key] route using the link.假设您想使用链接转到 slot/[key] 路由。
Then, in pages folder make a folder with name slot and inside it make a file with name [key].js, Note: Don't forget to put that [].然后，在 pages 文件夹中创建一个带有 name slot 的文件夹，并在其中创建一个名为 [key].js 的文件，注意：不要忘记放置 []。
inside [key].js folder you can simply export the component you want to render.在 [key].js 文件夹中，您可以简单地导出要渲染的组件。 There are many approaches to this, let's not go into it now.这有很多方法，我们现在不赘述。
Now, while using Link use it this way,现在，在使用 Link 时，请以这种方式使用它，
<Link
href={'/slot/[key]'}
as = {`/slot/${your_dynamic_variable}`}
>
<a>
Go to the slot route
</a>
</Link>
解决方案2
3 已采纳 2019-06-29 13:10:49
I just found the answer...我刚刚找到了答案...
Because I map dynamically /posts/:slug to /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 ).因为我在我的配置中动态映射/posts/:slug到/posts?slug=:slug （为了到达posts.jsx ），我需要对Link 组件（通过属性as ）做同样的事情。
解决方案3
3 2022-04-05 07:06:06
For anyone facing the same nonsense I was: Link was mistakenly auto imported from @material-ui/core对于任何面临同样胡说八道的人： Link错误地从@material-ui/core自动导入
You want:你要：
import Link from 'next/link'
解决方案4
2 2020-05-15 09:41:53
One thing to keep in mind while using Link in next.js is not to add "/" in the beginning ie,在 next.js 中使用 Link 时要记住的一件事是不要在开头添加“/”，即，
<Link
href="nameoflink"
>
<a>
Click Me
</a>
</Link>
instead of,代替，
<Link
href="/nameoflink"
>
<a>
Click Me
</a>
</Link>
If you add "/" in the beginning the page refreshes.如果在开头添加“/”，页面会刷新。 However, you need to add "/" in the beginning if that link is in some common component accessible throughout the application like navbar, in that case, add "/" in the beginning.但是，如果该链接位于整个应用程序中可访问的某个公共组件（如导航栏）中，则需要在开头添加“/”，在这种情况下，请在开头添加“/”。 Give it a try if it works for you then great.试一试，如果它对你有用，那就太好了。 I just thought I should share.我只是觉得我应该分享。
解决方案5
0 2020-10-06 08:29:52
**Use link as below: ** **使用以下链接：**
<Link href="/shop/[pid]" as={`/shop/${id}`}>
<a>Shop by menu</a>
</Link>
Instead Of代替
<Link href={`/shop/${id}`} as={`/shop/${id}`}>
<a>Shop by menu</a>
</Link>
解决方案6
0 2021-12-01 17:48:14
I was running into a similar issue.我遇到了类似的问题。 In my case, it was caused by having the <a> tag nested in another component, not as the direct child of the Link .就我而言，它是由<a>标签嵌套在另一个组件中引起的，而不是作为Link的直接子级。
So I had:所以我有：
<Link href='/something' passHref>
<MyComponent />
</Link>
where MyComponent accepted href as a prop and looked something like:其中MyComponent接受href作为道具，看起来像：
<a href={ href }>
Good things
</a>
This did work at first glance, as href is properly passed to the anchor tag.乍一看，这确实有效，因为 href 已正确传递给锚标记。 But it was causing a full page refresh when the link was clicked.但是当点击链接时它会导致整页刷新。 Once I moved the Link and a tag to be in the same component as direct parent/child, it solved the issue.有一次，我感动的Link和a标签是在同一组件直接父/子，它解决了这个问题。 So now I have the standard setup all within one component:所以现在我在一个组件中拥有所有标准设置：
<Link href='/something' passHref>
<a>
Good things
</a>
</Link>
No more page refresh.没有更多的页面刷新。
解决方案7
0 2022-07-21 09:32:27
simply use this :只需使用这个：
<Link href={`/blog/${encodeURIComponent(post.slug)}`}>
<a>{post.title}</a>
</Link>
reference : If the route has dynamic segments参考： 如果路线有动态段
解决方案8
0 2022-12-27 08:58:44
if you use Head tag then this will be refresh your page如果您使用 Head 标签，那么这将刷新您的页面
it will refresh your page because of Head tag由于 Head 标签，它会刷新您的页面
<Head>
<Link href="YourLink"> <Link>
// Other codes...
</Head>
remove Head tag移除 Head 标签
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.