Решено: Користите апликацију Хистори Реацт Роутер в6

Главни проблем у вези са коришћењем Хистори Реацт Роутер в6 је тај што не подржава рутирање засновано на хеш-у. То значи да све УРЛ адресе морају бити апсолутне путање, што може отежати управљање и одржавање апликације. Поред тога, не постоји уграђена подршка за динамичке руте, што може бити проблем при креирању сложених апликација са више страница. Коначно, Хистори Реацт Роутер в6 не пружа никакву подршку за приказивање на страни сервера, што може бити неопходно у неким случајевима.

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

// Овај код увози компоненте БровсерРоутер, Свитцх, Роуте и усеХистори из библиотеке реацт-роутер-дом.
// Затим креира функцију под називом Апп која користи усеХистори куку за креирање објекта историје.
// Овај објекат историје се користи у функцији званој хандлеЦлицк која гура нови унос у стек историје када се позове.
// Функција апликације затим враћа неки ЈСКС који укључује дугме са онЦлицк обрађивачем који позива хандлеЦлицк када се кликне.
// Коначно, постоји компонента Свитцх са једном компонентом Роуте унутар ње која приказује компоненту НевЛоцатион када се њена путања поклапа са „/нев-лоцатион“.

Шта је усеХистори

усеХистори је Реацт Хоок који обезбеђује Реацт Роутер који омогућава компонентама да приступе објекту историје ради програмске навигације. Може се користити за гурање нових локација у стог историје, замену тренутне локације, враћање напред-назад у историју итд.

Како да реагујем историју рута

У Реацт Роутер-у можете добити историју рута помоћу куке усеХистори. Ова кука омогућава приступ инстанци историје коју можете да користите за навигацију, кретање напред-назад у историји апликације и још много тога. Да бисте га користили, једноставно увезите куку из Реацт Роутер-а, а затим је позовите у својој компоненти:

импорт { усеХистори } из 'реацт-роутер-дом';

цонст МиЦомпонент = () => {
цонст хистори = усеХистори();

// Сада можете приступити историји руте преко `хистори` објекта.

повратак (…);
}

Да ли реагује рутер користи АПИ историје

Да, Реацт Роутер користи ХТМЛ5 Хистори АПИ за праћење тренутне локације и њене историје. Ово омогућава Реацт Роутер-у да ажурира страницу без потребе да је поново учитава, чинећи навигацију бржом и глаткијом. АПИ историје такође омогућава дубоко повезивање, што корисницима олакшава дељење веза које их воде директно на одређену страницу у апликацији.