时间戳

首页 > 解决方案 > 如何在不触发重新加载的情况下“替换” nextjs 中的路由？

reactjs - 如何在不触发重新加载的情况下“替换” nextjs 中的路由？

问题描述

我正在以下路线之间导航：

/welcome/article/article-slug-1
/welcome/article/article-slug-2
/welcome/article/article-slug-3

动态部分是一个article-slug东西，它成为一个查询参数。

我的页面结构：

/pages
  /welcome
    /index.js
    /article
      /[slug].js

我的文章列表在页面/welcome上可见。/welcome/article/slug

现在我这样做<Link href='/welcome/article/article-slug-1'/>了，这会重新加载页面。我可以在网络选项卡中看到它。

如何防止页面重新加载并仍然具有动态路由？

标签： reactjsnext.js

解决方案

这发生在我之前使用动态路由时。

对我的案子有用的是把你的href价值放在as里面并href用/welcome/article?slug=article-slug-1

所以你应该有这样的东西：

<Link 
  as='/welcome/article/article-slug-1'
  href='/welcome/article?slug=article-slug-1'
/>

推荐阅读