Løst: Bruk History React Router v6-appen

Hovedproblemet knyttet til bruk av History React Router v6 er at den ikke støtter hash-basert ruting. Dette betyr at alle URL-er må være absolutte stier, noe som kan gjøre det vanskelig å administrere og vedlikeholde applikasjonen. I tillegg er det ingen innebygd støtte for dynamiske ruter, noe som kan være et problem når du lager komplekse applikasjoner med flere sider. Til slutt, History React Router v6 gir ingen støtte for gjengivelse på serversiden, noe som kan være nødvendig i noen tilfeller.

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

// Denne koden importerer BrowserRouter-, Switch-, Route- og useHistory-komponentene fra react-router-dom-biblioteket.
// Den lager deretter en funksjon kalt App som bruker useHistory-kroken til å lage et historieobjekt.
// Dette historieobjektet brukes i en funksjon kalt handleClick som skyver en ny oppføring inn i historiestabelen når den kalles.
// App-funksjonen returnerer deretter noe JSX som inkluderer en knapp med en onClick-handler som kaller handleClick når den klikkes.
// Til slutt er det en svitsjkomponent med én rutekomponent inne i den som gjengir NewLocation-komponenten når banen samsvarer med "/new-location".

Hva er useHistory

useHistory er en React Hook levert av React Router som lar komponenter få tilgang til historieobjektet for å navigere programmatisk. Den kan brukes til å skyve nye plasseringer til historiestabelen, erstatte gjeldende plassering, gå frem og tilbake i historien, etc.

Hvordan får jeg rutehistorikk til å reagere

I React Router kan du få rutehistorikk ved å bruke useHistory-kroken. Denne kroken gir tilgang til historieforekomsten som du kan bruke til å navigere, gå frem og tilbake i appens historie og mer. For å bruke den, importer du bare kroken fra React Router og ringer den deretter inn i komponenten din:

importer { useHistory } fra 'react-router-dom';

const MyComponent = () => {
const historie = useHistory();

// Nå kan du få tilgang til rutehistorikken via 'historikk'-objektet.

komme tilbake (…);
}

Reagerer ruteren bruker historikk API

Ja, React Router bruker HTML5 History API for å holde styr på gjeldende plassering og historikk. Dette lar React Router oppdatere siden uten å måtte laste den på nytt, noe som gjør navigasjonen raskere og jevnere. History API tillater også dypkoblinger, noe som gjør det enklere for brukere å dele linker som tar dem direkte til en bestemt side i en applikasjon.

Relaterte innlegg:

Legg igjen en kommentar