Głównym problemem związanym z React Router Link jest to, że nie aktualizuje poprawnie historii przeglądarki po kliknięciu. Oznacza to, że jeśli użytkownik kliknie łącze, a następnie naciśnie przycisk Wstecz, zostanie przeniesiony z powrotem do poprzedniej strony zamiast do strony, z której właśnie wyszedł. Ponadto w niektórych przypadkach może to spowodować nieoczekiwane zachowanie, na przykład podczas używania ciągów zapytań lub fragmentów skrótów.
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. zaimportuj { BrowserRouter as Router, Route, Link } z „react-router-dom”;
// Ta linia importuje komponenty BrowserRouter, Route i Link z biblioteki react-router-dom.
2.
// Ta linia tworzy komponent Router, który będzie używany do tworzenia tras dla naszej aplikacji.
3.
4. Strona główna
// Ta linia tworzy łącze do strony głównej naszej aplikacji z tekstem „Home”.
5. O nas
// Ta linia tworzy łącze do strony informacyjnej naszej aplikacji z tekstem „Informacje”.
6.
// Ta linia tworzy trasę do strony głównej naszej aplikacji i renderuje komponent Home, gdy użytkownik uzyskuje do niego dostęp.
7.
8.
//To zamyka nasz element div, który zawiera wszystkie nasze trasy i linki
Łącze v6
Link v6 to nowy komponent w React Router, który zapewnia deklaratywne, dostępne rozwiązanie nawigacyjne dla aplikacji React. Zastępuje poprzedni komponent Link i zapewnia więcej funkcji oraz lepszą obsługę ułatwień dostępu. Link v6 obsługuje zarówno zwykłe łącza, jak i dynamiczne wyznaczanie tras, umożliwiając programistom tworzenie zaawansowanych doświadczeń nawigacyjnych bez konieczności ręcznego zarządzania trasami lub korzystania z bibliotek innych firm. Obsługuje również renderowanie po stronie serwera, co pozwala programistom tworzyć aplikacje przyjazne dla SEO przy minimalnym wysiłku. Wreszcie, Link v6 ma wbudowaną obsługę śledzenia analitycznego, co ułatwia śledzenie interakcji użytkownika z aplikacją.
Dlaczego React Router Link nie działa
Istnieje kilka możliwych powodów, dla których React Router Link nie działa w React Router. Najczęstszym powodem jest to, że komponent, z którym się łączysz, nie jest odpowiednio skonfigurowany lub skonfigurowany. Na przykład, jeśli komponent, z którym się łączysz, nie został poprawnie zaimportowany lub jeśli ścieżka trasy jest niepoprawna, React Router Link nie będzie działać. Dodatkowo, jeśli są jakieś literówki w ścieżce trasy lub nazwie komponentu, może to również powodować problemy z React Router Link. Wreszcie, jeśli występują konflikty między wieloma trasami (takie jak dwie trasy o tej samej dokładnej ścieżce), może to również powodować problemy z React Router Link.
