Решено: преузимање реацт рутера дом

Главни проблем у вези са преузимањем Реацт Роутер ДОМ-а је тај што може бити тешко конфигурисати и подесити. Реацт Роутер ДОМ захтева много конфигурације и подешавања, што може бити дуготрајно и сложено за програмере који су нови у библиотеци. Поред тога, Реацт Роутер ДОМ се стално развија, тако да програмери морају да буду у току са најновијом верзијом како би осигурали компатибилност са својим апликацијама.

import { BrowserRouter as Router, Route } from "react-router-dom";

ReactDOM.render(
  <Router>
    <Route path="/">
      <App />
    </Route>
  </Router>, 
  document.getElementById('root'));

1. „импорт { БровсерРоутер ас Роутер, Роуте } фром 'реацт-роутер-дом';“ – Ова линија увози компоненте БровсерРоутер и Роуте из библиотеке реацт-роутер-дом.

2. “РеацтДОМ.рендер(” – Ова линија позива методу РеацтДОМ рендер за рендеровање Реацт елемента у ДОМ у испорученом контејнеру и враћа референцу на компоненту (или враћа нулл за компоненте без стања).

КСНУМКС. "” – Ово је почетна ознака за компоненту рутера која ће се користити за омотавање свих наших рута како би се обезбедила функционалност рутирања за нашу апликацију.

КСНУМКС. "” – Ово је почетна ознака за компоненту руте која ће се користити за дефинисање једне руте унутар наше апликације која ће одговарати свим захтевима на '/'.

КСНУМКС. "” – Ово је самозатварајућа ознака која приказује компоненту апликације у нашем ДОМ стаблу када овој рути одговара реацт рутер дом.
Компонента апликације може бити било која Реацт компонента коју смо дефинисали негде другде у нашој бази кода или увезли из друге библиотеке или пакета као што су Материал УИ или Боотстрап итд…

6. “” – Ово је завршна ознака за компоненту руте која је отворена на линији 4 изнад, она затвара ову конкретну дефиницију руте тако да се друге руте могу додати ако је потребно касније у нашој бази кода без утицаја на функционалност или понашање ове .

7. “” – Ово је завршна ознака за компоненту рутера која је отворена на линији 3 изнад, она затвара ову конкретну дефиницију рутера тако да се други рутери могу додати ако је потребно касније у нашу базу кодова без утицаја на функционалност или понашање ове ..

8.”доцумент.гетЕлементБиИд('роот'));” – Коначно, документ гетЕлементБиИд('роот') прослеђујемо као аргумент методи РеацтДОМ рендер која му говори где тачно желимо да монтирамо/изгледамо апликацију унутар ДОМ стабла (у овом случају унутар елемента са ид=” корен").

пакет реацт-роутер-дом

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

како преузети пример кода реацт рутера дом

1. Инсталирајте Реацт Роутер Дом:
У директоријуму вашег пројекта покрените следећу команду да бисте инсталирали Реацт Роутер Дом:
`нпм инсталл реацт-роутер-дом`

2. Увезите Реацт Роутер Дом:
Када инсталирате Реацт Роутер Дом, можете га увести у свој пројекат помоћу следећег кода:
`импорт { БровсерРоутер ас Роутер, Роуте } фром 'реацт-роутер-дом'`

3. Креирајте компоненту руте:
Затим направите компоненту руте која ће приказати страницу када корисник посети наведену путању. На пример, ако желите да прикажете страницу када неко посети /хоме у вашој апликацији, можете да користите следећи код:
``

4. Замотајте своју апликацију компонентом рутера:
На крају, умотајте своју апликацију компонентом рутера тако да ће све ваше руте бити исправно приказане. То можете да урадите коришћењем следећег кода у вашој основној датотеци (обично индек.јс): ` `.