Vyriešené: Použite aplikáciu History React Router v6

Hlavným problémom súvisiacim s používaním History React Router v6 je, že nepodporuje smerovanie založené na hash. To znamená, že všetky adresy URL musia byť absolútne cesty, čo môže sťažiť správu a údržbu aplikácie. Navyše chýba vstavaná podpora dynamických trás, čo môže byť problém pri vytváraní zložitých aplikácií s viacerými stránkami. A nakoniec, History React Router v6 neposkytuje žiadnu podporu pre vykresľovanie na strane servera, čo môže byť v niektorých prípadoch potrebné.

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

// Tento kód importuje komponenty BrowserRouter, Switch, Route a useHistory z knižnice respond-router-dom.
// Potom vytvorí funkciu s názvom App, ktorá používa háčik useHistory na vytvorenie objektu histórie.
// Tento objekt histórie sa používa vo funkcii nazvanej handleClick, ktorá pri volaní vloží nový záznam do zásobníka histórie.
// Funkcia App potom vráti nejaké JSX, ktoré obsahuje tlačidlo s obslužným programom onClick, ktorý po kliknutí zavolá handleClick.
// Nakoniec je tu komponent Switch s jedným komponentom Route vo vnútri, ktorý vykresľuje komponent NewLocation, keď sa jeho cesta zhoduje s „/new-location“.

Čo je to useHistory

useHistory je React Hook poskytovaný React Routerom, ktorý umožňuje komponentom pristupovať k objektu histórie s cieľom programovej navigácie. Môže sa použiť na vloženie nových miest do zásobníka histórie, nahradenie aktuálneho miesta, prechod tam a späť v histórii atď.

Ako získam históriu trasy v reakcii

V React Router môžete získať históriu trasy pomocou háku useHistory. Tento hák poskytuje prístup k inštancii histórie, ktorú môžete použiť na navigáciu, prechádzanie tam a späť v histórii vašej aplikácie a ďalšie. Ak ho chcete použiť, jednoducho importujte hák z React Router a potom ho zavolajte vo svojom komponente:

import { useHistory } z 'react-router-dom';

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

// Teraz máte prístup k histórii trasy cez objekt `history`.

vrátiť (...);
}

Reaguje router na použitie histórie API

Áno, React Router používa HTML5 History API na sledovanie aktuálnej polohy a jej histórie. To umožňuje React Router aktualizovať stránku bez toho, aby ste ju museli znova načítať, vďaka čomu je navigácia rýchlejšia a plynulejšia. História API tiež umožňuje priame prepojenie, čo používateľom uľahčuje zdieľanie odkazov, ktoré ich prenesú priamo na konkrétnu stránku v aplikácii.