javascript - Behåll frågeparametrar under all användarnavigering i en react-app

När en användare besöker min webbplats kan han ta med sig några frågeparametrar, som han bör bära med sig under hela besöket. Jag använde Routes för att skapa vägarna.

Till exempel:

<Switch>
  <Route exact path="/component1" component={Component1} />
  <Route exact path="/component2" component={Component2} />
</Switch>

Komponenten1 eller 2 kan vara en annan router med delvägar, och så småningom kan användaren omdirigeras till ett annat projekt och han måste ta med sig parametrarna.

Till exempel:

Användaren besöker mysite.com/welcome?source=google, i det här projektet väljer han att gå till produktsektionen som har sökvägen mysite.com/product, och bör ta med source=google med sig, som mysite.com/product?source=google. Låt oss säga att jag har ett annat react-projekt som är fokuserat på registrering, och han går till signup.mysite.com/, om han använder knapparna i projektet bör han gå till signup.mysite.com/?source=google.

Jag såg några lösningar där det rekommenderas att implementera en URLSearchParams i alla komponenter, men det kan vara många, och det kommer att bli mycket upprepad kod.

Svar #1

Baserat på det faktum att användaren inte behöver veta om parametrarna, föreslår jag att du gör följande:

1. Lägg till en URLSearchParams inuti en useEffect i din App.js (eller var du än deklarerar rutterna), så att du kan hämta källvärdet från url:en.
2. Om parametern finns, spara den i localStorage eller Context.
3. Hämta det när du behöver och radera det när du inte behöver det längre.

Observera: Det är bra att hämta och ta bort informationen eftersom användaren kan navigera genom din webbplats och ibland dela en länk med en annan användare - vilket kommer att använda samma källvärde från den ursprungliga användaren och kan komma i konflikt med vissa affärsregler