Hlavním problémem souvisejícím s React Router Link je, že po kliknutí správně neaktualizuje historii prohlížeče. To znamená, že pokud uživatel klikne na odkaz a poté stiskne tlačítko Zpět, vrátí se zpět na předchozí stránku, nikoli na stránku, ze které právě odešel. Navíc to může v některých případech způsobit neočekávané chování, například při použití řetězců dotazu nebo fragmentů 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 as Router, Route, Link } z “react-router-dom”;
// Tento řádek importuje komponenty BrowserRouter, Route a Link z knihovny respond-router-dom.
2.
// Tento řádek vytvoří komponentu Router, která bude použita k vytvoření tras pro naši aplikaci.
3.
4. Domů
// Tento řádek vytvoří odkaz na domovskou stránku naší aplikace s textem 'Home'.
5. O Nás
// Tento řádek vytvoří odkaz na stránku o naší aplikaci s textem 'O aplikaci'.
6.
// Tento řádek vytvoří cestu pro domovskou stránku naší aplikace a vykreslí komponentu Home, když k ní přistoupí uživatel.
7.
8.
//Tím se zavře náš prvek div, který obsahuje všechny naše trasy a odkazy
Odkaz v6
Link v6 je nová komponenta v React Router, která poskytuje deklarativní a dostupné navigační řešení pro aplikace React. Nahrazuje předchozí komponentu Link a poskytuje více funkcí a lepší podporu pro usnadnění. Link v6 podporuje jak běžné odkazy, tak dynamické směrování, což umožňuje vývojářům vytvářet výkonné navigační zážitky, aniž by museli ručně spravovat trasy nebo používat knihovny třetích stran. Podporuje také vykreslování na straně serveru, což umožňuje vývojářům vytvářet aplikace šetrné k SEO s minimálním úsilím. A konečně, Link v6 má vestavěnou podporu pro analytické sledování, což usnadňuje sledování uživatelských interakcí s vaší aplikací.
Proč React Router Link nefunguje
Existuje několik možných důvodů, proč React Router Link nefunguje v React Router. Nejčastějším důvodem je, že propojená komponenta není správně nakonfigurována nebo nastavena. Pokud například komponenta, na kterou je odkazováno, nebyla správně importována nebo pokud je cesta trasy nesprávná, pak React Router Link nebude fungovat. Kromě toho, pokud jsou v cestě trasy nebo názvu komponenty nějaké překlepy, může to také způsobit problémy s React Router Link. A konečně, pokud dojde ke konfliktům mezi více cestami (například dvěma cestami se stejnou přesnou cestou), může to také způsobit problémy s React Router Link.
