Il problema principale relativo al passaggio dei dati nella cronologia del router di reazione, push è che i dati non vengono mantenuti durante gli aggiornamenti della pagina. Quando un utente aggiorna la pagina, i dati archiviati in history.push andranno persi e non saranno disponibili per l'uso nei successivi caricamenti della pagina. Ciò può portare a comportamenti imprevisti e può causare problemi durante il tentativo di accedere o archiviare i dati da un caricamento di pagina precedente.
import { useHistory } from "react-router-dom";
const MyComponent = () => {
const history = useHistory();
const handleClick = (data) => {
history.push({ pathname: "/mypage", state: data });
};
return <button onClick={() => handleClick({ someData: "data" })}>Go</button>;
};
1. Questa riga importa l'hook useHistory dalla libreria react-router-dom, che fornisce l'accesso all'oggetto cronologia che tiene traccia della posizione corrente nell'app.
2. Questa riga dichiara un componente funzionale chiamato MyComponent e lo assegna a una variabile costante.
3. Questa riga usa l'hook useHistory importato nella riga 1 per ottenere l'accesso all'oggetto history e assegnarlo a una variabile costante chiamata history.
4. Questa riga dichiara una funzione chiamata handleClick che prende un argomento chiamato data e spinge un oggetto contenente pathname e proprietà state nello stack della cronologia usando history.push().
5. Questa riga restituisce un elemento button con un gestore di eventi onClick che chiama handleClick() con un oggetto contenente someData come argomento quando viene cliccato da un utente.
Spinta di storia
Il push della cronologia in React Router è un metodo utilizzato per modificare a livello di codice l'URL nel browser senza causare un aggiornamento della pagina. Consente agli sviluppatori di creare applicazioni a pagina singola che sono ancora in grado di gestire la navigazione e il deep linking. Il push della cronologia funziona utilizzando l'API della cronologia del browser, che consente agli sviluppatori di manipolare l'URL corrente senza ricaricare la pagina. Ciò consente agli utenti di navigare tra le diverse pagine di un'applicazione senza dover ricaricare ogni volta. Inoltre, può essere utilizzato per il deep linking, consentendo agli utenti di collegarsi direttamente a parti specifiche di un'applicazione.
Come utilizzo la cronologia nel router di reazione
React Router fornisce un modo per utilizzare la cronologia nelle tue applicazioni React. La cronologia ti consente di tenere traccia della pagina corrente, nonché di eventuali pagine precedenti che sono state visitate. Questo è utile per creare la navigazione e tenere traccia delle azioni dell'utente.
Per utilizzare la cronologia in React Router, è necessario creare un oggetto cronologia utilizzando il metodo createHistory() dal pacchetto history. Questo ti darà accesso a metodi come push(), replace() e go(). Questi metodi ti consentono di manipolare l'URL del browser e navigare tra diversi percorsi nella tua applicazione. Puoi anche utilizzare il metodo listen() per ascoltare le modifiche nell'URL e aggiornare la tua applicazione di conseguenza.
Dopo aver creato un oggetto cronologia, puoi passarlo al componente del router durante la creazione. Ciò consentirà a React Router di tenere traccia di tutte le modifiche apportate dagli utenti e aggiornarsi di conseguenza.
L'utilizzo della cronologia con React Router rende più facile per gli sviluppatori creare potenti componenti di navigazione facili da comprendere e con cui gli utenti possono interagire.
