Löst: Använd History React Router v6-appen

Det största problemet med att använda History React Router v6 är att den inte stöder hash-baserad routing. Det betyder att alla webbadresser måste vara absoluta sökvägar, vilket kan göra det svårt att hantera och underhålla applikationen. Dessutom finns det inget inbyggt stöd för dynamiska rutter, vilket kan vara ett problem när man skapar komplexa applikationer med flera sidor. Slutligen, History React Router v6 ger inget stöd för server-side rendering, vilket kan vara nödvändigt i vissa fall.

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

// Den här koden importerar komponenterna BrowserRouter, Switch, Route och useHistory från react-router-dom-biblioteket.
// Den skapar sedan en funktion som heter App som använder useHistory-kroken för att skapa ett historikobjekt.
// Detta historikobjekt används i en funktion som heter handleClick som skjuter en ny post till historikstacken när den anropas.
// App-funktionen returnerar sedan en del JSX som inkluderar en knapp med en onClick-hanterare som anropar handleClick när den klickas.
// Slutligen finns det en Switch-komponent med en Route-komponent inuti den som återger NewLocation-komponenten när dess sökväg matchar "/new-location".

Vad är useHistory

useHistory är en React Hook som tillhandahålls av React Router som tillåter komponenter att komma åt historikobjektet för att kunna navigera programmatiskt. Den kan användas för att flytta nya platser till historikstacken, ersätta den nuvarande platsen, gå fram och tillbaka i historiken, etc.

Hur får jag rutthistorik att reagera

I React Router kan du få rutthistorik genom att använda useHistory-kroken. Den här kroken ger åtkomst till historikinstansen som du kan använda för att navigera, gå fram och tillbaka i din apps historik med mera. För att använda den, importera helt enkelt kroken från React Router och anrop den sedan i din komponent:

importera { useHistory } från 'react-router-dom';

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

// Nu kan du komma åt rutthistoriken via ett `history`-objekt.

lämna tillbaka (…);
}

Använder reager router History API

Ja, React Router använder HTML5 History API för att hålla reda på den aktuella platsen och dess historik. Detta gör att React Router kan uppdatera sidan utan att behöva ladda om den, vilket gör navigeringen snabbare och smidigare. History API tillåter också djuplänkar, vilket gör det lättare för användare att dela länkar som tar dem direkt till en specifik sida i en applikation.

Relaterade inlägg:

Lämna en kommentar