Vyřešeno: Použijte aplikaci History React Router v6

Hlavním problémem souvisejícím s používáním History React Router v6 je to, že nepodporuje směrování založené na hash. To znamená, že všechny adresy URL musí být absolutní cesty, což může ztížit správu a údržbu aplikace. Navíc zde není vestavěná podpora dynamických tras, což může být problém při vytváření složitých aplikací s více stránkami. A konečně, History React Router v6 neposkytuje žádnou podporu pro vykreslování na straně serveru, které může být v některých případech nezbytné.

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 knihovny respond-router-dom.
// Poté vytvoří funkci s názvem App, která používá háček useHistory k vytvoření objektu historie.
// Tento objekt historie se používá ve funkci nazvané handleClick, která při volání vloží nový záznam do zásobníku historie.
// Funkce App pak vrátí nějaké JSX, které obsahuje tlačítko s obslužnou rutinou onClick, která po kliknutí volá handleClick.
// Konečně je zde komponenta Switch s jednou komponentou Route uvnitř, která vykresluje komponentu NewLocation, když její cesta odpovídá „/new-location“.

Co je useHistory

useHistory je React Hook poskytovaný React Routerem, který umožňuje komponentám přistupovat k objektu historie za účelem programové navigace. Lze jej použít k přesunutí nových míst do zásobníku historie, nahrazení aktuálního umístění, přechodu tam a zpět v historii atd.

Jak získám historii trasy v reakci

V React Router můžete získat historii trasy pomocí háčku useHistory. Tento háček poskytuje přístup k instanci historie, kterou můžete použít k navigaci, přecházení tam a zpět v historii vaší aplikace a další. Chcete-li jej použít, jednoduše importujte hák z React Router a poté jej zavolejte ve své komponentě:

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

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

// Nyní můžete přistupovat k historii trasy prostřednictvím objektu `history`.

vrátit se (…);
}

Reaguje router na použití API historie

Ano, React Router používá HTML5 History API ke sledování aktuální polohy a její historie. To umožňuje React Router aktualizovat stránku bez nutnosti znovu načítat, takže navigace je rychlejší a plynulejší. Historie API také umožňuje přímé propojení, což uživatelům usnadňuje sdílení odkazů, které je zavedou přímo na konkrétní stránku v aplikaci.