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

Метод 1. Использование тега привязки с целевым атрибутом

import React from 'react';
const ExternalLink = ({ url, children }) => {
  return (
    <a href={url} target="_blank" rel="noopener noreferrer">
      {children}
    </a>
  );
};
export default ExternalLink;

Метод 2: использование перехватчика useHistory из React Router

import React from 'react';
import { useHistory } from 'react-router-dom';
const ExternalLink = ({ url, children }) => {
  const history = useHistory();
  const handleClick = () => {
    window.open(url, '_blank');
  };
  return (
    <button onClick={handleClick}>
      {children}
    </button>
  );
};
export default ExternalLink;

Метод 3. Использование объекта window.location

import React from 'react';
const ExternalLink = ({ url, children }) => {
  const handleClick = () => {
    window.location.href = url;
  };
  return (
    <button onClick={handleClick}>
      {children}
    </button>
  );
};
export default ExternalLink;

Метод 4. Использование компонента Link компонента React-router-dom

import React from 'react';
import { Link } from 'react-router-dom';
const ExternalLink = ({ url, children }) => {
  return (
    <Link to={url} target="_blank" rel="noopener noreferrer">
      {children}
    </Link>
  );
};
export default ExternalLink;

В этой статье мы рассмотрели различные методы создания ссылок на внешние сайты с помощью React Hooks. Мы рассмотрели использование тега привязки с целевым атрибутом, перехватчика useHistory из React Router, объекта window.location и компонента Link реагирующего маршрутизатора-dom. Каждый метод имеет свои преимущества и может быть выбран исходя из конкретных требований и предпочтений. Используя эти методы, разработчики могут легко включать внешние ссылки в свои приложения React.

Не забывайте использовать эти методы ответственно и обеспечивать безопасность внешних сайтов, на которые вы ссылаетесь. Приятного кодирования!