Rešeno: usmerjevalnik React Link deluje

Glavna težava, povezana z React Router Link, je, da ob kliku ne posodobi pravilno zgodovine brskalnika. To pomeni, da če uporabnik klikne povezavo in nato pritisne gumb za nazaj, se vrne na prejšnjo stran namesto na stran, s katere je pravkar zapustil. Poleg tega lahko to v nekaterih primerih povzroči nepričakovano vedenje, na primer pri uporabi poizvedbenih nizov ali fragmentov zgoščene vrednosti.

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

<Router>
  <div>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </div>
</Router>

1. uvozite { BrowserRouter kot usmerjevalnik, pot, povezava } iz »react-router-dom«;
// Ta vrstica uvozi komponente BrowserRouter, Route in Link iz knjižnice react-router-dom.

2.
// Ta vrstica ustvari komponento Router, ki bo uporabljena za ustvarjanje poti za našo aplikacijo.

3.

// Ta vrstica ustvari element div, ki bo vseboval vse naše poti in povezave.

4. HOME
// Ta vrstica ustvari povezavo do domače strani naše aplikacije z besedilom 'Domov'.

5. O meni
// Ta vrstica ustvari povezavo do strani o naši aplikaciji z besedilom 'O'.

6.
// Ta vrstica ustvari pot za domačo stran naše aplikacije in upodobi domačo komponento, ko do nje dostopa uporabnik.

7. //Ta vrstica ustvari pot za stran About naše aplikacije in upodobi komponento About, ko do nje dostopa uporabnik.

8.

//To zapre naš element div, ki vsebuje vse naše poti in povezave

Povezava v6

Link v6 je nova komponenta v React Routerju, ki zagotavlja deklarativno, dostopno navigacijsko rešitev za aplikacije React. Nadomešča prejšnjo komponento Link in zagotavlja več funkcij ter boljšo podporo za dostopnost. Link v6 podpira tako običajne povezave kot tudi dinamično usmerjanje, kar razvijalcem omogoča ustvarjanje močnih navigacijskih izkušenj, ne da bi morali ročno upravljati poti ali uporabljati knjižnice tretjih oseb. Podpira tudi upodabljanje na strani strežnika, kar razvijalcem omogoča ustvarjanje SEO prijaznih aplikacij z minimalnim naporom. Končno ima Link v6 vgrajeno podporo za sledenje analitike, kar olajša sledenje interakcij uporabnikov z vašo aplikacijo.

Zakaj React Router Link ne deluje

Obstaja več možnih razlogov, zakaj React Router Link ne deluje v React Routerju. Najpogostejši razlog je, da komponenta, s katero se povezujete, ni pravilno konfigurirana ali nastavljena. Na primer, če komponenta, s katero je povezana, ni bila pravilno uvožena ali če je pot poti napačna, React Router Link ne bo deloval. Poleg tega, če so tipkarske napake v poti poti ali imenu komponente, lahko to prav tako povzroči težave z React Router Link. Nazadnje, če pride do kakršnih koli sporov med več potmi (kot sta dve poti z enako natančno potjo), lahko to povzroči tudi težave z React Router Link.

Podobni objav:

Pustite komentar