如何使动态路由看起来像 Next.js 中的静态路由答案

【问题标题】：How can make dynamic route to look like static route in Next.js如何使动态路由看起来像 Next.js 中的静态路由
【发布时间】：2020-06-10 06:58:50
【问题描述】：

是否可以在 next.js Router.push 函数中将查询路由显示为静态？

我想做这样的事情。

 Router.push(
   `/statistics?entityId=${id}&entityType=Player&serviceProvider=${serviceProvider}&tab=overview`,
   `/statistics/player/id`,
   {
     shallow: true
   }

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

可以使用查询参数更新路由路径，而无需再次使用shallow-routing 运行数据获取方法。但需要注意的是，浅层路由仅适用于同一页面 URL。请参阅 docs

中的注意事项部分

因此，如果您尝试更新 /statistics?entityId=${id}，这仅对 /statistics 页面有效。您无法在/statistics/player/[id] 页面中获取更新的查询参数，因为它们是两个不同的页面。

这对/statistics页面有效

Router.push(
   `/statistics?entityId=${id}&entityType=Player&serviceProvider=${serviceProvider}&tab=overview`,
   { shallow: true }
)

因此，您可以使用/statistics 页面中的浅路由并使用router.query 访问更新的查询参数，然后根据它呈现数据，或者您可以拥有多个动态路由，例如/statistics/player/[id]、/statistics/some-other-entity/[id] .

【讨论】：