Router.push URL: new query string value to an existing asPath or update the existing query string

[coolbeatz71]

I am kinda lost on how the NextJS router system works:

I have articles by categories that can be:

Medical
Charity
Wedding
Funeral

I am having a navbar where the user can display articles by category, and can also search by a keyword. The category feature is working perfectly.

This is how my navbar looks like:

That means if the user clicks on All, we are displaying all articles:

Here is the scenario:

• When we click for example on Medical, the URL looks like this: http://localhost:3000/articles?category=medical
• When we click in all, the URL looks like http://localhost:3000/articles
• When we click in all and search the keyword COVID, the URL looks like this: http://localhost:3000/articles?search=covid

PROBLEM

I now want to combine categories and search:
If the user clicks in medical and searches for the keyword COVID, the URL must look like this: http://localhost:3000/articles?category=medical?search=covid.

After getting the search result, when the user changes the keyword, I want to replace the search query string with the new value.

HOW I TRIED TO DO?

I know NextJS router object has:

• pathname: Current route. That is the path of the page in /pages
• and asPath: Actual path (including the query) shown in the browser

const { push, asPath } = useRouter();

const onSearchKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    const keyword = e.currentTarget.value;
    if (e.key === "Enter") {
      url = !isEmpty(keyword.trim())
        ? {
          pathname: asPath,
          query: { search: keyword },
        }
        : {
          pathname,
        };
      push(url);
    }
  };

But doing so is encoding the asPath and resulting in this URL: http://localhost:3000/article%3Fcategory=covid?search=covid which is displaying the 404 page not found.

So, I don't even know if I can replace the search with a new value as the user wants to perform a new search.

[coolbeatz71]

I solved the issue by not using the asPath: I instead used the pathname alongside the spread operator as follow:

url = !isEmpty(keyword.trim())
     ? {
        pathname,
        query: { ...query, search: keyword },
     }: {
        pathname: page,
     };

[IRediTOTO]

Something wrong here??? http://localhost:3000/articles?category=medical?search=covid
It must be http://localhost:3000/articles?category=medical&search=covid

[coolbeatz71]

@IRediTOTO Ohh yeah, I made a mistake while typing my question