Can not add query params to the nextjs dynamic route

Question

I have file named. [slug].js.

what I am trying to do is that I want to add query parameter to this dynamic route, this is the code.

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

This works fine every static page but on dynamic page it gives me this error:

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

any suggestions please?

Frank Fiegel · Accepted Answer · 2022-09-25 22:49:08Z

4

@Ghader's answer in in the correct direction, but incomplete:

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

You need to remove query parameters from the pathname as otherwise, you are going to get double encoded URLs.

answered Sep 25, 2022 at 22:49

Frank Fiegel

3133 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ash · Accepted Answer · 2022-11-17 16:57:40Z

1

Use router.asPath to get current page path without query string :

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

edited Nov 17, 2022 at 16:57

Ash

2587 silver badges21 bronze badges

answered Feb 16, 2022 at 16:05

Ghader Salehi

1724 bronze badges

Comments

juliomalves · Accepted Answer · 2022-10-01 16:40:44Z

0

If you're just adding query parameters to the current path, you can completely omit the pathname field from the URL object.

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

answered Oct 1, 2022 at 16:40

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Collectives™ on Stack Overflow

Can not add query params to the nextjs dynamic route

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related