Głównym problemem związanym z linkami zewnętrznymi React Router jest to, że mogą one powodować nieoczekiwane zachowanie podczas nawigowania między różnymi stronami. Na przykład, jeśli użytkownik kliknie link zewnętrzny na stronie React Router, przeglądarka opuści bieżącą stronę zamiast przekierować do nowej strony w aplikacji. Może to prowadzić do zamieszania i frustracji użytkowników, którzy oczekują płynnego przejścia między stronami. Ponadto linki zewnętrzne mogą również powodować problemy z SEO, ponieważ wyszukiwarki mogą nie być w stanie poprawnie indeksować treści ze źródeł zewnętrznych.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. Ta linia importuje komponent Link z biblioteki react-router-dom.
2. Ta linia tworzy element linku, który po kliknięciu przekieruje do „https://www.example.com” i otworzy go w nowej karcie bez wysyłania informacji o stronie odsyłającej do nowej strony. Tekst linku będzie brzmiał „Link zewnętrzny”.
Co to jest link zewnętrzny
Link zewnętrzny w React Router to link, który przenosi użytkownika na stronę poza aplikacją. Może to być zewnętrzna strona internetowa lub inna aplikacja. Linki zewnętrzne służą do dostarczania użytkownikom dodatkowych informacji lub zasobów związanych z treścią w aplikacji. Mogą być również wykorzystywane jako sposób kierowania użytkowników do innych aplikacji lub stron internetowych w celu dalszej eksploracji.
Jak dodać link zewnętrzny za pomocą React Router
Dodanie zewnętrznego łącza za pomocą React Router w React Router to prosty proces. Najpierw musisz zaimportować komponent Link z pakietu react-router-dom. Następnie możesz użyć komponentu Link, aby utworzyć łącze do zewnętrznego adresu URL. Składnia tworzenia łącza wygląda następująco:
Na przykład, jeśli chcesz utworzyć link do Google, wyglądałoby to tak:
Po utworzeniu linku możesz dodać dodatkowe rekwizyty, takie jak atrybuty target i rel, aby uzyskać lepszą dostępność i bezpieczeństwo. Na przykład:
