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

Question

我有文件命名。 [slug].js 。

我想做的是我想向这个动态路由添加查询参数，这是代码。

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

每 static 页面都可以正常工作，但在动态页面上它会给我这个错误：

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

有什么建议吗？

Answer 1

使用router.asPath获取当前页面地址：

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

Answer 2

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

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

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

Answer 3

如果您只是将查询参数添加到当前路径，则可以完全省略 URL object 中的pathname名字段。

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