Atrisināts: lejupielādējiet react maršrutētāju dom

Galvenā problēma, kas saistīta ar React Router DOM lejupielādi, ir tā, ka to var būt grūti konfigurēt un iestatīt. React Router DOM ir nepieciešama liela konfigurācija un iestatīšana, kas var būt laikietilpīga un sarežģīta izstrādātājiem, kuri ir jauni bibliotēkā. Turklāt React Router DOM pastāvīgi attīstās, tāpēc izstrādātājiem ir jāsaglabā jaunākā versija, lai nodrošinātu saderību ar savām lietojumprogrammām.

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

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

1. “importēt { BrowserRouter as Router, Route } from 'react-router-dom';” – Šī rinda importē BrowserRouter un Route komponentus no react-router-dom bibliotēkas.

2. “ReactDOM.render(” — šī rinda izsauc ReactDOM renderēšanas metodi, lai atveidotu React elementu iekļautajā konteinerā esošajā DOM un atgrieztu atsauci uz komponentu (vai atgriež nulli bezvalsts komponentiem).

3. "” — šī ir maršrutētāja komponenta sākuma atzīme, kas tiks izmantota visu mūsu maršrutu aptvēršanai, lai nodrošinātu maršrutēšanas funkcionalitāti mūsu lietojumprogrammai.

4. "” — šī ir maršruta komponenta sākuma atzīme, kas tiks izmantota, lai mūsu lietojumprogrammā definētu vienu maršrutu, kas atbildīs visiem pieprasījumiem, kas veikti ar '/'.

5. "” — šis ir pašaizverošs tags, kas padara lietotnes komponentu mūsu DOM kokā, ja šim maršrutam atbilst react maršrutētāja dom.
Lietotnes komponents var būt jebkurš React komponents, ko esam definējuši citur mūsu kodu bāzē vai importējuši no citas bibliotēkas vai pakotnes, piemēram, Material UI vai Bootstrap utt.

6. “” — šī ir maršruta komponenta beigu atzīme, kas tika atvērta 4. rindiņā, tā aizver šo konkrēto maršruta definīciju, lai vēlāk mūsu kodu bāzē varētu pievienot citus maršrutus, ja nepieciešams, neietekmējot šī komponenta funkcionalitāti vai uzvedību. .

7. “” — šī ir maršrutētāja komponenta beigu atzīme, kas tika atvērta 3. rindiņā iepriekš. Tas aizver šo konkrēto maršrutētāja definīciju, lai vēlāk mūsu kodu bāzē varētu pievienot citus maršrutētājus, ja nepieciešams, neietekmējot šī maršrutētāja funkcionalitāti vai uzvedību. ..

8.”document.getElementById('root'));” – Visbeidzot, mēs nododam dokumentu getElementById('root') kā argumentu ReactDOM renderēšanas metodei, kas norāda, kur tieši mēs vēlamies pievienot/renderēt lietotni DOM koka iekšpusē (šajā gadījumā elementa ar id= iekšpusē). sakne”).

React-router-dom pakotne

React Router ir populāra React maršrutēšanas bibliotēka. Tas nodrošina jaudīgu, viegli lietojamu API lietojumprogrammu maršrutu un navigācijas pārvaldībai. React-router-dom pakotne ir oficiālā React Router versija tīmekļa lietojumprogrammām. Tas nodrošina tādas sastāvdaļas kā un lai palīdzētu pārvaldīt maršrutēšanu savā lietotnē. Tas ietver arī tādus āķus kā useHistory, useLocation un useParams, lai piekļūtu pašreizējā maršruta informācijai no jūsu komponentiem. Izmantojot react-router-dom, varat viegli izveidot dinamiskus maršrutus, pamatojoties uz URL parametriem, vaicājumu virknēm vai pat pielāgotu loģiku. Varat arī izveidot ligzdotus maršrutus ar dinamiskiem segmentiem, lai nodrošinātu precīzāku lietojumprogrammas navigācijas struktūras kontroli.

kā lejupielādēt react maršrutētāju dom koda piemērs

1. Instalējiet React Router Dom:
Projekta direktorijā palaidiet šo komandu, lai instalētu React Router Dom:
`npm install react-router-dom

2. Importēt React Router Dom:
Kad esat instalējis React Router Dom, varat to importēt savā projektā ar šādu kodu:
`importēt { BrowserRouter as Router, Route } no 'react-router-dom'

3. Izveidojiet maršruta komponentu:
Pēc tam izveidojiet maršruta komponentu, kas atveidos lapu, kad lietotājs apmeklēs norādīto ceļu. Piemēram, ja vēlaties renderēt lapu, kad kāds jūsu lietojumprogrammā apmeklē vietni /home, varat izmantot šādu kodu:
``

4. Aptiniet savu lietotni ar maršrutētāja komponentu:
Visbeidzot, ietiniet savu lietotni ar maršrutētāja komponentu, lai visi maršruti tiktu atveidoti pareizi. To var izdarīt, saknes failā (parasti index.js) izmantojot šādu kodu: ` `.