Resuelto: use la aplicación History React Router v6

El principal problema relacionado con el uso de History React Router v6 es que no es compatible con el enrutamiento basado en hash. Esto significa que todas las direcciones URL deben ser rutas absolutas, lo que puede dificultar la administración y el mantenimiento de la aplicación. Además, no hay soporte integrado para rutas dinámicas, lo que puede ser un problema al crear aplicaciones complejas con varias páginas. Finalmente, History React Router v6 no brinda soporte para la representación del lado del servidor, lo que puede ser necesario en algunos casos.

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>   ); }

// Este código importa los componentes BrowserRouter, Switch, Route y useHistory de la biblioteca react-router-dom.
// Luego crea una función llamada App que usa el enlace useHistory para crear un objeto de historial.
// Este objeto de historial se usa en una función llamada handleClick que inserta una nueva entrada en la pila de historial cuando se llama.
// La función de la aplicación luego devuelve algo de JSX que incluye un botón con un controlador onClick que llama a handleClick cuando se hace clic.
// Finalmente, hay un componente Switch con un componente Route dentro que representa el componente NewLocation cuando su ruta coincide con “/new-location”.

¿Qué es el historial de uso?

useHistory es un React Hook proporcionado por React Router que permite que los componentes accedan al objeto de historial para navegar mediante programación. Se puede usar para enviar nuevas ubicaciones a la pila del historial, reemplazar la ubicación actual, avanzar y retroceder en el historial, etc.

¿Cómo obtengo el historial de rutas en reaccionar?

En React Router, puede obtener el historial de rutas usando el enlace useHistory. Este enlace brinda acceso a la instancia de historial que puede usar para navegar, avanzar y retroceder en el historial de su aplicación y más. Para usarlo, simplemente importa el enlace desde React Router y luego llámalo en tu componente:

importar { useHistory } desde 'react-router-dom';

const MiComponente = () => {
const historial = useHistory();

// Ahora puede acceder al historial de rutas a través del objeto `history`.

retorno (…);
}

¿Reacciona la API del historial de uso del enrutador?

Sí, React Router utiliza la API de historial de HTML5 para realizar un seguimiento de la ubicación actual y su historial. Esto permite que React Router actualice la página sin tener que volver a cargarla, lo que hace que la navegación sea más rápida y fluida. La API de historial también permite la vinculación profunda, lo que facilita que los usuarios compartan vínculos que los lleven directamente a una página específica en una aplicación.