Rozwiązany: Użyj aplikacji History React Router v6

Głównym problemem związanym z używaniem History React Router v6 jest to, że nie obsługuje on routingu opartego na hashowaniu. Oznacza to, że wszystkie adresy URL muszą być ścieżkami bezwzględnymi, co może utrudniać zarządzanie i konserwację aplikacji. Dodatkowo nie ma wbudowanej obsługi tras dynamicznych, co może stanowić problem podczas tworzenia złożonych aplikacji z wieloma stronami. Wreszcie, History React Router v6 nie zapewnia żadnej obsługi renderowania po stronie serwera, co w niektórych przypadkach może być konieczne.

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

// Ten kod importuje komponenty BrowserRouter, Switch, Route i useHistory z biblioteki react-router-dom.
// Następnie tworzy funkcję o nazwie App, która używa haka useHistory do utworzenia obiektu historii.
// Ten obiekt historii jest używany w funkcji o nazwie handleClick, która po wywołaniu umieszcza nowy wpis na stosie historii.
// Następnie funkcja App zwraca plik JSX, który zawiera przycisk z procedurą obsługi onClick, która wywołuje handleClick po kliknięciu.
// Wreszcie istnieje komponent Switch z jednym komponentem Route, który renderuje komponent NewLocation, gdy jego ścieżka pasuje do „/new-location”.

Co to jest useHistory

useHistory to React Hook dostarczony przez React Router, który umożliwia komponentom dostęp do obiektu historii w celu programistycznej nawigacji. Można go użyć do wypychania nowych lokalizacji do stosu historii, zastępowania bieżącej lokalizacji, przechodzenia tam iz powrotem w historii itp.

Jak uzyskać historię tras w Reaguj

W React Router możesz uzyskać historię tras za pomocą haka useHistory. Ten zaczep zapewnia dostęp do instancji historii, której możesz używać do nawigacji, przechodzenia tam iz powrotem w historii aplikacji i nie tylko. Aby go użyć, po prostu zaimportuj hak z React Router, a następnie wywołaj go w swoim komponencie:

zaimportuj { useHistory } z „react-router-dom”;

const Mój składnik = () => {
const historia = useHistoria();

// Teraz możesz uzyskać dostęp do historii tras poprzez obiekt `history`.

powrót (…);
}

Czy router reaguje na użycie interfejsu API historii

Tak, React Router używa HTML5 History API do śledzenia bieżącej lokalizacji i jej historii. Dzięki temu React Router może aktualizować stronę bez konieczności jej ponownego ładowania, dzięki czemu nawigacja jest szybsza i płynniejsza. History API umożliwia również głębokie łączenie, co ułatwia użytkownikom udostępnianie linków prowadzących bezpośrednio do określonej strony w aplikacji.