我有一个Next.js博客，只有2条路线：/和/posts/:slug。当我在/posts/my-post-title上点击返回链接（到/）时，一切都很好，页面加载很快（没有刷新）。当我在/上点击/posts/my-post-title时，页面刷新了，我不知道为什么。有什么建议吗？链接：blog、sources
/
/posts/:slug
/posts/my-post-title
vddsk6oq1#
我有这个问题之前，我以为我解决了它，但再次以上没有帮助我完全解决这个问题，所以我张贴我的解决方案。假设您想使用链接转到插槽/[键]路由。然后，在页面文件夹中创建一个名为slot的文件夹，并在其中创建一个名为[key].js的文件，注意：别忘了写上[]。在[key].js文件夹中，你可以简单地导出你想要渲染的组件。有很多方法可以实现这一点，我们现在不讨论它。现在，当使用链接时，请这样使用它，
<Link href={'/slot/[key]'} as = {`/slot/${your_dynamic_variable}`} > <a> Go to the slot route </a> </Link>
yc0p9oo02#
在next.js中使用Link时要记住的一件事是不要在开头添加"/"，即：
<Link href="nameoflink" > <a> Click Me </a> </Link>
作为替代，
<Link href="/nameoflink" > <a> Click Me </a> </Link>
如果你在开头加上"/"，页面就会刷新。但是，如果链接是在整个应用程序中可以访问的一些公共组件（如导航栏）中，你需要在开头加上"/"，在这种情况下，在开头加上"/"。如果它对你有用，那就试试吧。我只是觉得我应该分享一下。
9vw9lbht3#
我刚刚找到了答案...因为我在config中动态地将/posts/:slugMap到/posts?slug=:slug（为了到达posts.jsx），所以我需要对the Link component执行相同的操作（通过属性as）。
/posts?slug=:slug
posts.jsx
r6l8ljro4#
对于任何人面对同样的废话我是：错误地从@material-ui/core自动导入了Link您希望：
@material-ui/core
Link
import Link from 'next/link'
gajydyqb5#
<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>
hrysbysz6#
我遇到过类似的问题，在我的例子中，这是由于<a>标记嵌套在另一个组件中，而不是作为Link的直接子组件。所以我有：
<a>
<Link href='/something' passHref> <MyComponent /> </Link>
其中MyComponent接受href作为 prop ，看起来像这样：
MyComponent
href
<a href={ href }> Good things </a>
乍一看，这确实有效，因为href被正确地传递给了锚标记。但是当点击链接时，它会导致整个页面刷新。一旦我将Link和a标记移动到同一个组件中作为直接父/子标记，它就解决了这个问题。所以现在我在一个组件中有了所有的标准设置：
a
<Link href='/something' passHref> <a> Good things </a> </Link>
不再刷新页面。
xt0899hw7#
只需使用以下命令：
<Link href={`/blog/${encodeURIComponent(post.slug)}`}> <a>{post.title}</a> </Link>
reference：如果管线具有动态管段
ncgqoxb08#
如果您使用Head标记，则这将刷新您页面由于Head标记，它将刷新您页面
<Head> <Link href="YourLink"> <Link> // Other codes... </Head>
删除Head标记
8条答案
按热度按时间vddsk6oq1#
我有这个问题之前，我以为我解决了它，但再次以上没有帮助我完全解决这个问题，所以我张贴我的解决方案。
假设您想使用链接转到插槽/[键]路由。
然后，在页面文件夹中创建一个名为slot的文件夹，并在其中创建一个名为[key].js的文件，注意：别忘了写上[]。
在[key].js文件夹中，你可以简单地导出你想要渲染的组件。有很多方法可以实现这一点，我们现在不讨论它。
现在，当使用链接时，请这样使用它，
yc0p9oo02#
在next.js中使用Link时要记住的一件事是不要在开头添加"/"，即：
作为替代，
如果你在开头加上"/"，页面就会刷新。但是，如果链接是在整个应用程序中可以访问的一些公共组件（如导航栏）中，你需要在开头加上"/"，在这种情况下，在开头加上"/"。如果它对你有用，那就试试吧。我只是觉得我应该分享一下。
9vw9lbht3#
我刚刚找到了答案...
因为我在config中动态地将
/posts/:slugMap到/posts?slug=:slug（为了到达posts.jsx），所以我需要对the Link component执行相同的操作（通过属性as）。r6l8ljro4#
对于任何人面对同样的废话我是：错误地从
@material-ui/core自动导入了Link您希望：
gajydyqb5#
hrysbysz6#
我遇到过类似的问题，在我的例子中，这是由于
<a>标记嵌套在另一个组件中，而不是作为Link的直接子组件。所以我有：
其中
MyComponent接受href作为 prop ，看起来像这样：乍一看，这确实有效，因为href被正确地传递给了锚标记。但是当点击链接时，它会导致整个页面刷新。一旦我将
Link和a标记移动到同一个组件中作为直接父/子标记，它就解决了这个问题。所以现在我在一个组件中有了所有的标准设置：不再刷新页面。
xt0899hw7#
只需使用以下命令：
reference：如果管线具有动态管段
ncgqoxb08#
如果您使用Head标记，则这将刷新您页面
由于Head标记，它将刷新您页面
删除Head标记