Opgelost: gebruik de History React Router v6-app

Het grootste probleem met betrekking tot het gebruik van History React Router v6 is dat het geen op hash gebaseerde routering ondersteunt. Dit betekent dat alle URL's absolute paden moeten zijn, wat het beheer en onderhoud van de applicatie kan bemoeilijken. Bovendien is er geen ingebouwde ondersteuning voor dynamische routes, wat een probleem kan zijn bij het maken van complexe applicaties met meerdere pagina's. Ten slotte biedt History React Router v6 geen ondersteuning voor server-side rendering, wat in sommige gevallen nodig kan zijn.

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

// Deze code importeert de componenten BrowserRouter, Switch, Route en useHistory uit de react-router-dom-bibliotheek.
// Vervolgens wordt een functie genaamd App gemaakt die de useHistory-hook gebruikt om een ​​geschiedenisobject te maken.
// Dit geschiedenisobject wordt gebruikt in een functie genaamd handleClick die een nieuw item op de geschiedenisstapel duwt wanneer het wordt aangeroepen.
// De App-functie retourneert dan wat JSX die een knop bevat met een onClick-handler die handleClick aanroept wanneer erop wordt geklikt.
// Ten slotte is er een Switch-component met daarin een Route-component die de NewLocation-component weergeeft wanneer het pad overeenkomt met "/new-location".

Wat is gebruikGeschiedenis

useHistory is een React Hook geleverd door React Router waarmee componenten toegang hebben tot het geschiedenisobject om programmatisch te navigeren. Het kan worden gebruikt om nieuwe locaties naar de geschiedenisstapel te pushen, de huidige locatie te vervangen, heen en weer te gaan in de geschiedenis, enz.

Hoe krijg ik routegeschiedenis in reactie

In React Router kun je de routegeschiedenis opvragen met behulp van de useHistory-hook. Deze hook geeft toegang tot de geschiedenisinstantie die u kunt gebruiken om te navigeren, heen en weer te gaan in de geschiedenis van uw app en meer. Om het te gebruiken, importeert u eenvoudig de hook van React Router en roept u deze vervolgens op in uw component:

importeer { useHistory } van 'react-router-dom';

const MijnComponent = () => {
const geschiedenis = useHistory();

// Nu heb je toegang tot de routegeschiedenis via het `history`-object.

opbrengst (…);
}

Gebruikt de reactierouter de geschiedenis-API

Ja, React Router gebruikt de HTML5 History API om de huidige locatie en de geschiedenis bij te houden. Hierdoor kan React Router de pagina bijwerken zonder deze opnieuw te hoeven laden, waardoor de navigatie sneller en soepeler verloopt. De History API maakt ook deeplinking mogelijk, waardoor het voor gebruikers gemakkelijker wordt om links te delen die hen rechtstreeks naar een specifieke pagina in een applicatie leiden.