无法将查询参数添加到nextjs动态路由

zzoitvuj 于 2022-11-23 发布在其他

关注(0)|答案(3)|浏览(144)

我有一个名为. [slug].js的文件。
我想做的是，我想添加查询参数到这个动态路由，这是代码。

await router.replace({
          pathname: `${router.pathname}`,
          query: { coupon },
        },
        undefined,
        { shallow: true });

这在每个静态页面都能正常工作，但在动态页面上却出现了以下错误：

Error: The provided `href` (/home/[slug]?theme=dark) value is missing query values (slug) to be interpolated properly. Read more: https://err.sh/vercel/next.js/href-interpolation-failed

有什么建议吗？

next.js

来源：https://stackoverflow.com/questions/71144867/can-not-add-query-params-to-the-nextjs-dynamic-route

3条答案

按热度按时间

afdcj2ne1#

使用router.asPath获取当前页面路径，不带查询字符串：

router.replace({
          pathname: router.asPath,
          query: { coupon },
        },
        undefined,
        { shallow: true });

赞(0）回复(0）举报 2022-11-23

rggaifut2#

@Ghader的回答在正确的方向上，但不完整：

router.replace(
  {
    pathname: router.asPath.split('?')[0],
    query: { coupon },
  },
  undefined,
  { shallow: true }
);

您需要从pathname中删除查询参数，否则，您将获得双重编码的URL。

赞(0）回复(0）举报 2022-11-23

ukqbszuj3#

如果只是向当前路径添加查询参数，则可以完全忽略URL对象中的pathname字段。

router.replace(
    { query: { coupon } },
    undefined,
    { shallow: true }
);

赞(0）回复(0）举报 2022-11-23

我来回答

无法将查询参数添加到nextjs动态路由

3条答案

相关问题

热门标签

最新问答