Rešeno: prenesite odzivni usmerjevalnik dom

Glavna težava v zvezi s prenosom React Router DOM je, da ga je lahko težko konfigurirati in nastaviti. React Router DOM zahteva veliko konfiguracije in nastavitev, kar je lahko dolgotrajno in zapleteno za razvijalce, ki so novi v knjižnici. Poleg tega se React Router DOM nenehno razvija, zato morajo razvijalci biti na tekočem z najnovejšo različico, da zagotovijo združljivost s svojimi aplikacijami.

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

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

1. “uvoz { BrowserRouter kot usmerjevalnik, Route } iz 'react-router-dom';” – Ta vrstica uvozi komponente BrowserRouter in Route iz knjižnice react-router-dom.

2. “ReactDOM.render(” – ta vrstica pokliče metodo upodabljanja ReactDOM za upodobitev elementa React v DOM v priloženem vsebniku in vrne sklic na komponento (ali vrne nič za komponente brez stanja).

3. "” – To je začetna oznaka za komponento usmerjevalnika, ki bo uporabljena za zavijanje vseh naših poti, da bi zagotovili funkcijo usmerjanja za našo aplikacijo.

4. "” – To je začetna oznaka za komponento Route, ki bo uporabljena za definiranje ene same poti v naši aplikaciji, ki se bo ujemala z vsemi zahtevami na '/'.

5. "” – To je samozapiralna oznaka, ki upodobi komponento aplikacije v naše drevo DOM, ko se tej poti ujema dom usmerjevalnika odziva.
Komponenta aplikacije je lahko katera koli komponenta React, ki smo jo definirali drugje v naši kodni bazi ali uvozili iz druge knjižnice ali paketa, kot je Material UI ali Bootstrap itd.

6. »« – To je zaključna oznaka za komponento poti, ki je bila odprta v 4. vrstici zgoraj, zapre to določeno definicijo poti, tako da je mogoče pozneje v našo kodno zbirko po potrebi dodati druge poti, ne da bi to vplivalo na funkcionalnost ali vedenje te .

7. »« – To je zaključna oznaka za komponento usmerjevalnika, ki je bila odprta v 3. vrstici zgoraj, zapre to določeno definicijo usmerjevalnika, tako da lahko druge usmerjevalnike po potrebi dodate pozneje v našo kodno zbirko, ne da bi to vplivalo na funkcionalnost ali vedenje tega ..

8.”document.getElementById('root'));” – Končno posredujemo dokument getElementById('root') kot argument metodi upodabljanja ReactDOM, ki ji pove, kje točno želimo namestiti/upodobiti aplikacijo znotraj drevesa DOM (v tem primeru znotraj elementa z id=” koren”).

paket react-router-dom

React Router je priljubljena usmerjevalna knjižnica za React. Zagotavlja zmogljiv API, enostaven za uporabo, za upravljanje aplikacijskih poti in navigacije. Paket react-router-dom je uradna različica React Routerja za spletne aplikacije. Zagotavlja komponente, kot so in za pomoč pri upravljanju usmerjanja v vaši aplikaciji. Vključuje tudi kljuke, kot so useHistory, useLocation in useParams za dostop do informacij o trenutni poti znotraj vaših komponent. Z react-router-dom lahko preprosto ustvarite dinamične poti na podlagi parametrov URL-ja, poizvedbenih nizov ali celo logike po meri. Ustvarite lahko tudi ugnezdene poti z dinamičnimi segmenti, da zagotovite natančnejši nadzor nad strukturo navigacije vaše aplikacije.

kako prenesti usmerjevalnik React dom Primer kode

1. Namestite React Router Dom:
V imeniku vašega projekta zaženite naslednji ukaz za namestitev React Router Dom:
`npm install react-router-dom`

2. Uvozi React Router Dom:
Ko namestite React Router Dom, ga lahko uvozite v svoj projekt z naslednjo kodo:
`import { BrowserRouter as Router, Route } from 'react-router-dom'`

3. Ustvarite komponento poti:
Nato ustvarite komponento poti, ki bo upodobila stran, ko uporabnik obišče določeno pot. Na primer, če želite upodobiti stran, ko nekdo obišče /home v vaši aplikaciji, lahko uporabite naslednjo kodo:
``

4. Ovijte aplikacijo s komponento usmerjevalnika:
Končno ovijte svojo aplikacijo s komponento usmerjevalnika, da bodo vse vaše poti pravilno upodobljene. To lahko storite z uporabo naslednje kode v korenski datoteki (običajno index.js): ` `.