A React Router Linkkel kapcsolatos fő probléma az, hogy nem frissíti megfelelően a böngésző előzményeit, ha rákattint. Ez azt jelenti, hogy ha a felhasználó rákattint egy hivatkozásra, majd megnyomja a vissza gombot, akkor a rendszer visszakerül az előző oldalra, nem arra az oldalra, ahonnan éppen elnavigált. Ezenkívül ez bizonyos esetekben váratlan viselkedést okozhat, például lekérdezési karakterláncok vagy hash töredékek használatakor.
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. import { BrowserRouter as Router, Route, Link } a „react-router-dom” fájlból;
// Ez a sor importálja a BrowserRouter, Route és Link összetevőket a react-router-dom könyvtárból.
2.
// Ez a sor egy Router komponenst hoz létre, amelyet az alkalmazásunk útvonalainak létrehozására használunk.
3.
4. Kezdőlap
// Ez a sor hivatkozást hoz létre az alkalmazásunk kezdőlapjára a „Kezdőlap” szöveggel.
5. Rólunk
// Ez a sor hivatkozást hoz létre alkalmazásunk névjegyoldalára a „Névjegy” szöveggel.
6.
// Ez a sor útvonalat hoz létre az alkalmazásunk kezdőlapjához, és megjeleníti a Home komponenst, amikor egy felhasználó hozzáfér.
7.
8.
//Ez bezárja az összes útvonalunkat és hivatkozásunkat tartalmazó div elemünket
Link v6
A Link v6 a React Router új összetevője, amely deklaratív, elérhető navigációs megoldást kínál a React alkalmazásokhoz. Leváltja a korábbi Link összetevőt, és több funkciót és jobb támogatást biztosít a kisegítő lehetőségekhez. A Link v6 támogatja mind a normál linkeket, mind a dinamikus útválasztást, lehetővé téve a fejlesztők számára, hogy hatékony navigációs élményt hozzanak létre anélkül, hogy manuálisan kellene kezelniük az útvonalakat vagy harmadik féltől származó könyvtárakat kellene használniuk. Támogatja a szerveroldali megjelenítést is, amely lehetővé teszi a fejlesztők számára, hogy minimális erőfeszítéssel SEO-barát alkalmazásokat hozzanak létre. Végül, a Link v6 beépített támogatással rendelkezik az analitikai követéshez, így könnyebben nyomon követhető a felhasználói interakciók az alkalmazással.
Miért nem működik a React Router Link?
Számos oka lehet annak, hogy a React Router Link nem működik a React Routerben. A leggyakoribb ok az, hogy a hivatkozott összetevő nincs megfelelően konfigurálva vagy beállítva. Például, ha a hivatkozott összetevőt nem megfelelően importálták, vagy ha az útvonal nem megfelelő, akkor a React Router Link nem fog működni. Ezen túlmenően, ha bármilyen elírási hiba van az útvonal útvonalában vagy az összetevő nevében, ez problémákat okozhat a React Router Link funkcióval kapcsolatban. Végül, ha ütközések vannak több útvonal között (például két, azonos pontos útvonallal rendelkező útvonal), az is problémákat okozhat a React Router Link funkcióval.
