Løst: Brug History React Router v6 app

Hovedproblemet i forbindelse med at bruge History React Router v6 er, at det ikke understøtter hash-baseret routing. Det betyder, at alle URL'er skal være absolutte stier, hvilket kan gøre det svært at administrere og vedligeholde applikationen. Derudover er der ingen indbygget understøttelse af dynamiske ruter, hvilket kan være et problem ved oprettelse af komplekse applikationer med flere sider. Endelig giver History React Router v6 ingen support til server-side rendering, hvilket kan være nødvendigt i nogle tilfælde.

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 kode importerer BrowserRouter-, Switch-, Route- og useHistory-komponenterne fra react-router-dom-biblioteket.
// Den opretter derefter en funktion kaldet App, som bruger useHistory-krogen til at oprette et historieobjekt.
// Dette historieobjekt bruges i en funktion kaldet handleClick, som skubber en ny post ind i historiestakken, når den kaldes.
// App-funktionen returnerer derefter noget JSX, som inkluderer en knap med en onClick-handler, der kalder handleClick, når der klikkes på.
// Endelig er der en Switch-komponent med en rute-komponent inde i den, der gengiver NewLocation-komponenten, når dens sti matcher "/new-location".

Hvad er useHistory

useHistory er en React Hook leveret af React Router, der tillader komponenter at få adgang til historieobjektet for at kunne navigere programmatisk. Den kan bruges til at skubbe nye placeringer til historiestakken, erstatte den nuværende placering, gå frem og tilbage i historikken osv.

Hvordan får jeg rutehistorikken til at reagere

I React Router kan du få rutehistorik ved at bruge useHistory-krogen. Denne krog giver adgang til historieforekomsten, som du kan bruge til at navigere, gå frem og tilbage i din apps historie og meget mere. For at bruge den skal du blot importere krogen fra React Router og derefter kalde den i din komponent:

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

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

// Nu kan du få adgang til rutehistorikken via et `historik` objekt.

Vend tilbage (…);
}

Reager router bruger historie API

Ja, React Router bruger HTML5 History API til at holde styr på den aktuelle placering og dens historie. Dette giver React Router mulighed for at opdatere siden uden at skulle genindlæse den, hvilket gør navigationen hurtigere og smidigere. History API giver også mulighed for dybe links, hvilket gør det nemmere for brugerne at dele links, der fører dem direkte til en bestemt side i en applikation.

Relaterede indlæg:

Efterlad en kommentar