Con l'avvento di framework o librerie che permettono di sviluppare SPA la comunicazione tra le varie sezioni dell'applicazione è senza dubbio facilitata, la maggior parte di questi strumenti integrano funzionalità che permettono di creare url basandosi sulla nostra configurazione.

Sebbene le SPA aiutino in questa configurazione, dall'altra ci dimentichiamo forse del vero scopo dietro un url: poter ripristinare lo stato della pagina.

Per capire meglio facciamo un esempio pensando ad un "classico" sito web nella cui pagina iniziale vi è una form che permetta di filtrare una lista sottostante. Dato l'url products, nel momento in cui facciamo submit verrà caricata la pagina 'products?category=office'. Se convertissimo lo stesso esempio in una SPA il risultato, in termini di contenuto, sarà invariato, otterremo sempre la lista filtrata, ma l'url rimarrà /products, dato che la comunicazione con il servizio avviene tramite chiamate ajax. Si evince quindi che nel caso volessi salvare il link della ricerca, nel primo caso riuscirei a rivedere i risultati coerenti, nel secondo caso la pagina si caricherà senza alcun filtro.

In ReactJS poche righe di codice ci permetteranno di gestire la query string migliorando l'esperienza utente. Per la manipolazione ci basiamo su funzionalità esposte dal pacchetto react-router-dom

import { useLocation } from "react-router-dom";

let query = new URLSearchParams(useLocation().search);

const [state, setState] = useState({
  category: query.get('category') ?? ""
});

Una volta letta la query string occorrerà aggiornarla tramite il codice seguente

import { useHistory } from "react-router-dom";

let history = useHistory();

var q = new URLSearchParams();
q.append('category','office');

history.replace({
  search: q.toString()
})