Вирішено: використовуйте програму 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, наданий React Router, який дозволяє компонентам отримувати доступ до об’єкта історії для програмної навігації. Його можна використовувати для надсилання нових місць у стек історії, заміни поточного розташування, переходу вперед і назад в історії тощо.

Як отримати історію маршрутів у React

У React Router ви можете отримати історію маршрутів за допомогою хука useHistory. Цей хук надає доступ до екземпляра історії, який можна використовувати для навігації, переходу вперед і назад в історії вашої програми тощо. Щоб використовувати його, просто імпортуйте хук з React Router, а потім викличте його у своєму компоненті:

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

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

// Тепер ви можете отримати доступ до історії маршруту через об'єкт `history`.

повернення (…);
}

Маршрутизатор реагує на використання API історії

Так, React Router використовує API історії HTML5, щоб відстежувати поточне місцезнаходження та його історію. Це дозволяє React Router оновлювати сторінку без необхідності її перезавантажувати, роблячи навігацію швидшою та плавнішою. API історії також дозволяє створювати глибокі посилання, що полегшує користувачам обмінюватися посиланнями, які спрямовують їх безпосередньо на певну сторінку програми.