reactjs - NextJS: Nieuwe querystring-waarde toevoegen aan een bestaande asPath of de bestaande querystring bijwerken

Ik ben een beetje in de war over hoe het NextJS-routeringssysteem werkt:

Ik heb artikelen per categorie die kunnen zijn:

Medical
Charity
Wedding
Funeral

Ik heb een navigatiebalk waar de gebruiker artikelen kan weergeven op categorie, en ook kan zoeken op een zoekwoord. De categoriefunctie werkt perfect.

Zo ziet mijn navigatiebalk eruit:

Dat betekent dat als de gebruiker op All klikt, we alle artikelen weergeven:

Hier is het scenario:

• Wanneer we bijvoorbeeld klikken op Medical, ziet de URL er zo uit: http://localhost:3000/articles?category=medical
• Wanneer we op alles klikken, ziet de URL er uit als http://localhost:3000/articles
• Wanneer we op all klikken en het trefwoord COVID zoeken, ziet de URL er zo uit: http://localhost:3000/articles?search=covid

PROBLEEM

Ik wil nu categorieën en zoeken combineren: Als de gebruiker op medisch klikt en zoekt naar het trefwoord COVID, moet de URL er als volgt uitzien: http://localhost:3000/articles?category=medical&search=covid.

Na het krijgen van het zoekresultaat, wil ik wanneer de gebruiker het trefwoord wijzigt, de search query string vervangen door de nieuwe waarde.

HOE HEB IK GEPOOGD TE DOEN?

Ik weet dat het NextJS-routerobject het volgende heeft:

• pathname: Huidige route. Dat is het pad van de pagina in /pages
• en asPath: Werkelijk pad (inclusief de query) dat in de browser wordt weergegeven

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);
    }
  };

Maar dit doen codeert de asPath en resulteert in deze URL: http://localhost:3000/article%3Fcategory=covid&search=covid, wat de 404 pagina niet gevonden weergeeft.

Dus ik weet niet eens of ik de search kan vervangen door een nieuwe waarde aangezien de gebruiker een nieuwe zoekopdracht wil uitvoeren.

Antwoord #1

Ik heb het probleem opgelost door asPath niet te gebruiken: ik gebruikte in plaats daarvan pathname samen met de spread-operator als volgt:

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