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() })
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Creare un'applicazione React e configurare Tailwind CSS
Assegnare un valore di default a un parametro di una lambda in C#
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Creare form tipizzati con Angular
Verificare la provenienza di un commit tramite le GitHub Actions
Limitare le richieste lato server con l'interactive routing di Blazor 8
Short-circuiting della Pipeline in ASP.NET Core
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Usare il versioning con i controller di ASP.NET Core Web API
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
I più letti di oggi
- Vuoi incontrare Bill Gates? Viaggia con ASPItalia.com!
- Customizzare il pager del DataGrid
- Stabilire un collegamento VPN tra una Web App e una Virtual Network
- Documentare ASP.NET Web API con Swagger
- Usare i servizi REST di BING per ottenere informazioni sulla posizione dell'utente
- Visual Studio 2005 CTP May