Hlavným problémom súvisiacim s React Router Link je to, že po kliknutí správne neaktualizuje históriu prehliadača. To znamená, že ak používateľ klikne na odkaz a potom stlačí tlačidlo Späť, vráti sa späť na predchádzajúcu stránku a nie na stránku, z ktorej práve odišiel. Okrem toho to môže v niektorých prípadoch spôsobiť neočakávané správanie, napríklad pri použití reťazcov dotazu alebo fragmentov hash.
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. importujte { BrowserRouter ako Router, Route, Link } z “react-router-dom”;
// Tento riadok importuje komponenty BrowserRouter, Route a Link z knižnice respond-router-dom.
2.
// Tento riadok vytvorí komponent Router, ktorý bude použitý na vytvorenie trás pre našu aplikáciu.
3.
4. Domov
// Tento riadok vytvorí odkaz na domovskú stránku našej aplikácie s textom 'Domov'.
5. O nás
// Tento riadok vytvorí odkaz na stránku o našej aplikácii s textom 'O programe'.
6.
// Tento riadok vytvorí trasu pre domovskú stránku našej aplikácie a vykreslí komponent Home, keď k nemu pristúpi používateľ.
7.
8.
//Týmto sa zatvorí náš prvok div, ktorý obsahuje všetky naše trasy a odkazy
Odkaz v6
Link v6 je nový komponent v React Router, ktorý poskytuje deklaratívne a dostupné navigačné riešenie pre aplikácie React. Nahrádza predchádzajúci komponent Link a poskytuje viac funkcií a lepšiu podporu pre prístupnosť. Link v6 podporuje bežné prepojenia aj dynamické smerovanie, čo umožňuje vývojárom vytvárať výkonné navigačné zážitky bez toho, aby museli manuálne spravovať trasy alebo používať knižnice tretích strán. Podporuje tiež vykresľovanie na strane servera, čo umožňuje vývojárom vytvárať aplikácie vhodné pre SEO s minimálnym úsilím. Napokon, Link v6 má vstavanú podporu pre sledovanie analýzy, čo uľahčuje sledovanie interakcií používateľov s vašou aplikáciou.
Prečo React Router Link nefunguje
Existuje niekoľko možných dôvodov, prečo React Router Link nefunguje v React Router. Najčastejším dôvodom je, že komponent, ku ktorému je pripojený, nie je správne nakonfigurovaný alebo nastavený. Napríklad, ak komponent, na ktorý sa odkazuje, nebol správne importovaný alebo ak je cesta trasy nesprávna, React Router Link nebude fungovať. Okrem toho, ak sú v ceste alebo názve komponentu nejaké preklepy, môže to tiež spôsobiť problémy s React Router Link. Nakoniec, ak dôjde ku konfliktom medzi viacerými trasami (napríklad dve trasy s rovnakou presnou cestou), môže to tiež spôsobiť problémy s React Router Link.
