Next.js中Shallow routing不生效？代码问题求助

你这段代码里的Shallow routing用错场景了，核心问题是Shallow routing不能跨页面路由生效。

Shallow routing的适用场景是在同一个页面路由下修改URL的查询参数或哈希值，比如从/home到/home?page=2，这种情况下设置shallow: true可以不重新加载页面组件、不触发数据获取方法。但你现在是从根路由/（首页组件）跳转到/post/1（独立的文章详情组件），这属于完全不同的页面路由，Next.js会忽略shallow: true的配置，强制触发页面导航。

给你两个可行的替代思路：

• 如果文章内容本来就在首页中展示，改成用查询参数传递ID：

const router = useRouter();

const handleClick = () => {
  router.push(`/?postId=${post.id}`, undefined, { shallow: true });
}

// 在首页组件内根据router.query.postId的值，切换渲染对应的文章内容

• 如果必须用/post/[id]这种路径形式，又不想跳转页面，只能考虑把首页和文章内容合并成同一个页面组件，通过路由参数控制渲染内容，但这种设计并不符合Next.js的路由规范，不推荐。

内容的提问来源于stack exchange，提问作者Epple