Risolto: usa l'app History React Router v6

Il problema principale relativo all'utilizzo di History React Router v6 è che non supporta il routing basato su hash. Ciò significa che tutti gli URL devono essere percorsi assoluti, il che può rendere difficile la gestione e la manutenzione dell'applicazione. Inoltre, non esiste un supporto integrato per i percorsi dinamici, il che può rappresentare un problema durante la creazione di applicazioni complesse con più pagine. Infine, History React Router v6 non fornisce alcun supporto per il rendering lato server, che potrebbe essere necessario in alcuni casi.

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useHistory,
} from "react-router-dom";

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// Questo codice importa i componenti BrowserRouter, Switch, Route e useHistory dalla libreria react-router-dom.
// Quindi crea una funzione chiamata App che utilizza l'hook useHistory per creare un oggetto cronologia.
// Questo oggetto cronologia viene utilizzato in una funzione chiamata handleClick che inserisce una nuova voce nello stack cronologia quando viene chiamata.
// La funzione App restituisce quindi alcuni JSX che includono un pulsante con un gestore onClick che chiama handleClick quando viene fatto clic.
// Infine, c'è un componente Switch con un componente Route al suo interno che esegue il rendering del componente NewLocation quando il suo percorso corrisponde a "/new-location".

Cos'è useHistory

useHistory è un React Hook fornito da React Router che consente ai componenti di accedere all'oggetto cronologia per navigare a livello di programmazione. Può essere utilizzato per inserire nuove posizioni nello stack della cronologia, sostituire la posizione corrente, andare avanti e indietro nella cronologia, ecc.

Come ottengo la cronologia del percorso in React

In React Router, puoi ottenere la cronologia del percorso utilizzando l'hook useHistory. Questo hook dà accesso all'istanza della cronologia che puoi usare per navigare, andare avanti e indietro nella cronologia della tua app e altro ancora. Per usarlo, importa semplicemente l'hook da React Router e poi chiamalo nel tuo componente:

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

const MioComponente = () => {
const cronologia = useHistory();

// Ora puoi accedere alla cronologia del percorso tramite l'oggetto `history`.

Restituzione (…);
}

Il router reagisce utilizza l'API della cronologia

Sì, React Router utilizza l'API History HTML5 per tenere traccia della posizione corrente e della sua cronologia. Ciò consente a React Router di aggiornare la pagina senza doverla ricaricare, rendendo la navigazione più veloce e fluida. L'API History consente anche il collegamento diretto, che rende più facile per gli utenti condividere collegamenti che li portano direttamente a una pagina specifica in un'applicazione.