Основна проблема, пов’язана із зовнішніми посиланнями React Router, полягає в тому, що вони можуть викликати неочікувану поведінку під час переходу між різними сторінками. Наприклад, якщо користувач клацне зовнішнє посилання, перебуваючи на сторінці React Router, браузер перейде з поточної сторінки, а не перейде на нову сторінку в програмі. Це може призвести до плутанини та розчарування користувачів, які очікують плавного переходу між сторінками. Крім того, зовнішні посилання також можуть спричинити проблеми з SEO, оскільки пошукові системи можуть бути не в змозі належним чином індексувати вміст із зовнішніх джерел.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. Цей рядок імпортує компонент Link з бібліотеки react-router-dom.
2. Цей рядок створює елемент посилання, який переспрямовуватиме на «https://www.example.com» після натискання та відкриватиме його в новій вкладці без інформації про реферера, надісланої на нову сторінку. Текст посилання буде «Зовнішнє посилання».
Що таке зовнішнє посилання
Зовнішнє посилання в React Router – це посилання, яке спрямовує користувача на сторінку за межами програми. Це може бути зовнішній веб-сайт або інша програма. Зовнішні посилання використовуються для надання користувачам додаткової інформації або ресурсів, пов’язаних із вмістом програми. Їх також можна використовувати як спосіб скеровувати користувачів до інших програм або веб-сайтів для подальшого вивчення.
Як додати зовнішнє посилання за допомогою React Router
Додавання зовнішнього посилання за допомогою React Router у React Router є простим процесом. По-перше, вам потрібно імпортувати компонент Link з пакету react-router-dom. Потім ви можете використовувати компонент Link для створення посилання на зовнішню URL-адресу. Синтаксис створення посилання виглядає так:
Наприклад, якщо ви хочете створити посилання на Google, це виглядатиме так:
Створивши посилання, ви можете додати додаткові атрибути, як-от атрибути target і rel, для кращої доступності та безпеки. Наприклад:
