El principal problema relacionat amb l'ús de History React Router v6 és que no admet l'encaminament basat en hash. Això vol dir que tots els URL han de ser camins absoluts, cosa que pot dificultar la gestió i el manteniment de l'aplicació. A més, no hi ha suport integrat per a rutes dinàmiques, cosa que pot ser un problema quan es creen aplicacions complexes amb diverses pàgines. Finalment, History React Router v6 no ofereix cap suport per a la representació del costat del servidor, que pot ser necessari en alguns 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> ); }
// Aquest codi importa els components BrowserRouter, Switch, Route i useHistory de la biblioteca react-router-dom.
// A continuació, crea una funció anomenada App que utilitza el ganxo useHistory per crear un objecte d'historial.
// Aquest objecte d'historial s'utilitza en una funció anomenada handleClick que empeny una nova entrada a la pila d'historial quan es crida.
// La funció de l'aplicació retorna una mica de JSX que inclou un botó amb un controlador onClick que crida a handleClick quan es fa clic.
// Finalment, hi ha un component Switch amb un component Route al seu interior que representa el component NewLocation quan el seu camí coincideix amb "/new-location".
Què és l'ús Història
useHistory és un React Hook proporcionat per React Router que permet als components accedir a l'objecte d'historial per navegar programadament. Es pot utilitzar per introduir noves ubicacions a la pila d'historial, substituir la ubicació actual, anar i tornar a l'historial, etc.
Com puc obtenir l'historial de rutes en reaccionar
A React Router, podeu obtenir l'historial de rutes utilitzant el ganxo useHistory. Aquest ganxo dóna accés a la instància de l'historial que podeu utilitzar per navegar, anar i tornar a l'historial de la vostra aplicació i molt més. Per utilitzar-lo, simplement importeu el ganxo des de React Router i, a continuació, truqueu-lo al vostre component:
importar { useHistory } des de 'react-router-dom';
const MyComponent = () => {
const history = useHistory();
// Ara podeu accedir a l'historial de rutes mitjançant l'objecte "historial".
tornar (...);
}
El router de reacció fa servir l'historial de l'API
Sí, React Router utilitza l'API d'historial HTML5 per fer un seguiment de la ubicació actual i del seu historial. Això permet a React Router actualitzar la pàgina sense haver de tornar-la a carregar, fent que la navegació sigui més ràpida i fluida. L'API History també permet enllaços profunds, cosa que facilita als usuaris compartir enllaços que els porten directament a una pàgina específica d'una aplicació.
