Решено: Използвайте приложението History React Router v6

Основният проблем, свързан с използването на History React Router v6, е, че той не поддържа базирано на хеш маршрутизиране. Това означава, че всички URL адреси трябва да са абсолютни пътища, което може да затрудни управлението и поддръжката на приложението. Освен това няма вградена поддръжка за динамични маршрути, което може да бъде проблем при създаване на сложни приложения с множество страници. И накрая, History React Router v6 не предоставя никаква поддръжка за изобразяване от страна на сървъра, което може да е необходимо в някои случаи.

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

// Този код импортира компонентите BrowserRouter, Switch, Route и useHistory от библиотеката react-router-dom.
// След това създава функция, наречена App, която използва куката useHistory, за да създаде исторически обект.
// Този обект на историята се използва във функция, наречена handleClick, която избутва нов запис в стека на историята, когато бъде извикана.
// След това функцията App връща някакъв JSX, който включва бутон с манипулатор onClick, който извиква handleClick при щракване.
// И накрая, има компонент Switch с един компонент Route вътре в него, който изобразява компонента NewLocation, когато неговият път съвпада с „/new-location“.

Какво е useHistory

useHistory е React Hook, предоставен от React Router, който позволява на компонентите да имат достъп до обекта на историята, за да навигират програмно. Може да се използва за изпращане на нови местоположения към стека с история, замяна на текущото местоположение, връщане напред и назад в историята и т.н.

Как да получа история на маршрута в React

В React Router можете да получите история на маршрута, като използвате куката useHistory. Тази кука дава достъп до екземпляра на хронологията, който можете да използвате за навигация, връщане напред и назад в хронологията на вашето приложение и др. За да го използвате, просто импортирайте куката от React Router и след това я извикайте във вашия компонент:

импортиране { useHistory } от 'react-router-dom';

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

// Сега можете да получите достъп до историята на маршрута чрез обекта `history`.

връщане (…);
}

Реагира ли рутерът използва API за история

Да, React Router използва HTML5 History API, за да следи текущото местоположение и неговата история. Това позволява на React Router да актуализира страницата, без да се налага да я презарежда, което прави навигацията по-бърза и гладка. Приложният програмен интерфейс (API) за история също позволява дълбоки връзки, което улеснява потребителите да споделят връзки, които ги отвеждат директно до конкретна страница в приложение.