0

Im creating a search page so I am using the URL params to handle the filters, such as product category and price.

This is my current method that handles adding and removing the URL params:

 function handleCheck(checked: Boolean, id: string, option) {
    if (checked) {
      if (router.query[id]) {
        router.query[id] += `,${option.value}`;
      } else {
        router.query[id] = `${option.value}`;
      }
    }
    if (!checked) {
      if (router.query[id]) {
        let param = router.query[id].toString();
        let array = param.split(",");
        array = array.filter((param) => param !== option.value);
        router.query[id] = array;
      }
    }
    router.push(router);
  }

I get these warnings everytime the URL changes:

enter image description here

squish
  • 846
  • 12
  • 24
  • 2
    Is this relevant: https://github.com/vercel/next.js/issues/7962 – Dan P Oct 19 '21 at 09:25
  • Why are you passing the router instance itself to the [`router.push`](https://nextjs.org/docs/api-reference/next/router#routerpush) call? Its first argument should either be a string or URL object. – juliomalves Oct 19 '21 at 17:58
  • I believe I saw another example here on stack overflow that suggested pushing the entire object. Should i try with just the router.query? @juliomalves – squish Oct 19 '21 at 18:15
  • Yeah, as a string. I would also recommend you not to mutate `router.query`, and generate a new query string to pass to `router.push`. – juliomalves Oct 19 '21 at 18:42

0 Answers0