Переадресация на внешний сайт с React Router

Быстрый ответ

Для создания внешней ссылки в React вам не понадобится React Router. Вместо этого используйте привычный тег <a>, снабдив его нужным URL:

<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">Перейти на внешний сайт</a>

С атрибутом target="_blank" ссылка откроется в новой вкладке. Атрибут rel="noopener noreferrer" обеспечивает защиту исходной страницы от возможного взаимодействия с открывшейся вкладкой, он выполняет роль запертой двери в вашем доме в контексте React.

Эффективные способы перенаправления на внешние ресурсы

Функциональный компонент для перенаправления

Если требуются действия до перенаправления, можно использовать функциональный компонент в виде диспетчера:

// Ваш личный диспетчер перенаправлений, готов к старту! 🚀 
const Redirector = ({ url }) => {
  useEffect(() => { window.location.href = url; }, [url]);
  return null;
};

Подробнее об этом расскажет наш спикер на видео

Безопасность при открытии новых вкладок

Безопасность прежде всего! В теге a всегда используйте noopener noreferrer в атрибуте rel, чтобы предотвратить возможное взаимодействие с новой вкладкой:

// Ваш надежный переходник к миру внешних ссылок!
<a href="https://secure-external-link.com" target="_blank" rel="noopener noreferrer">Открыть безопасную ссылку</a>

Использование <Link> из React Router для внешних ссылок

Если вас привлекает знакомство с React Router, используйте полный URL в атрибуте to компонента <Link>. Это будет похоже на традиционное использование тегов <a>:

// Компонент <Link /> напоминает о прошлых временах, не так ли? 😊
<Link to="http://external.com" target="_blank">Внешняя Ссылка</Link>

Не забывайте, что target="_blank" откроет ссылку в новой вкладке.

Навигация вне компонентов React

Когда требуется выполнить переход без привлечения компонентов (например, в Redux), можно использовать window.location.href. Это позволит осуществить переход с помощью нативного JavaScript, минуя React Router:

window.location.href = 'https://external-site.com'; // И мы уже на странице!

Визуализация

Представьте, что вы находитесь на космической станции (🚀) и вдруг почувствовали желание взглянуть в космическое пространство (🌌):

// Это не простой React-компонент, это врата во вселенную!
const SpaceStation = () => {
  return (
    <div>
      <h1>Добро пожаловать на космическую станцию 🚀</h1>
      <a href="http://www.universe.com" target="_blank" rel="noopener noreferrer">
        Открыть иллюминатор! 🛰️
      </a>
    </div>
  );
};

Клик по ссылке – это словно нажатие на большую блестящую кнопку (🔘) на пульте управления:

🚀 Внутри космической станции: [Пульт управления, Жилые отсеки, Лаборатория]
🔘 Нажатие кнопки -> 🌌 Открытие иллюминатора

Бесконечная вселенная (то есть интернет) всего в один клик от вас. Власть буквально в ваших руках! 🖱️🌌

Особенное рассмотрение внешних URL в Redux

Классовые компоненты остаются востребованными для перенаправления

Несмотря на эру функциональных компонентов и хуков, классовые компоненты React все еще играют важную роль. componentDidMount отлично подходит для реализации перенаправлений на внешние ресурсы:

class ExternalRedirect extends React.Component {
  componentDidMount() {
    window.location.replace(this.props.url); // Мы уже в пути!
  }

  render() {
    return null;
  }
}

Функция window.location.replace работает как безвозвратное перенаправление, не оставляя следов в истории браузера.

Защитаем частную жизнь пользователя – никаких утечек!

В безграничном мире интернета частная жизнь пользователя стоит на переднем плане. Всегда используйте атрибут rel='noreferrer' при создании тегов a, ведущих на внешние сайты. Это предотвратит утечку заголовков реферера:

<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">Посетить внешний сайт</a>

Отличие между прямой и безопасной навигацией

Функция window.open открывает внешние ссылки в новой вкладке. Однако ее использование может быть непредсказуемым, если не задать соответствующие параметры:

window.open('https://external-site.com', '_blank', 'noopener,noreferrer'); // Безопасное использование

Особенности разных версий React Router

При создании своего решения для <Redirect>, не забывайте об отличиях разных версий React Router. Например, классический React Router v3 упростит задачу с помощью <Redirect>, тогда как v4 может потребовать дополнительных зависимостей или конфигурации.

Полезные материалы

1. React Router: Декларативная навигация для React.js — Обзор навигации вне компонентов React Router.
2. Проброс рефов – React — Изучение принципа прокидывания рефов для управления навигацией внутри компонентов React.
3. Использование HTML5 History API | CSS-Tricks — Знакомство с применением HTML5 History API на примере, представленном на сайте CSS-Tricks.