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

Метод 1: использование компонента Link
Самый простой способ создать внешнюю ссылку на вкладках Material-UI — использовать компонент Link из библиотеки реагирования-маршрутизатора-dom. Для этого метода в вашем проекте должна быть установлена ​​библиотека React Router.

import { Link } from 'react-router-dom';
import { Tab, Tabs } from '@material-ui/core';
function MyTabs() {
  return (
    <Tabs>
      <Tab component={Link} to="https://example.com" label="External Link" />
      {/* Additional tabs */}
    </Tabs>
  );
}

Метод 2. Использование тега привязки
Другой простой подход — использовать тег привязки (<a>) непосредственно внутри компонента «Вкладка». Этот метод подходит, если вы хотите создать ссылку на определенный URL-адрес без использования библиотеки маршрутизации.

import { Tab, Tabs } from '@material-ui/core';
function MyTabs() {
  return (
    <Tabs>
      <Tab
        label="External Link"
        component="a"
        href="https://example.com"
        target="_blank"
        rel="noopener noreferrer"
      />
      {/* Additional tabs */}
    </Tabs>
  );
}

Метод 3: настраиваемый компонент вкладки
Если вам требуется больший контроль над внешним видом и поведением вкладки, вы можете создать настраиваемый компонент вкладки. Такой подход позволяет гибко обрабатывать внешние ссылки.

import { Tab, Tabs } from '@material-ui/core';
function ExternalTab({ label, href }) {
  const handleClick = () => {
    window.open(href, '_blank');
  };
  return (
    <Tab label={label} onClick={handleClick} />
  );
}
function MyTabs() {
  return (
    <Tabs>
      <ExternalTab label="External Link" href="https://example.com" />
      {/* Additional tabs */}
    </Tabs>
  );
}

В этой статье мы рассмотрели различные методы создания внешних ссылок на вкладках Material-UI. Мы рассмотрели использование компонента Link из React-router-dom, использование тега привязки непосредственно внутри компонента Tab и создание собственного компонента Tab. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и наслаждайтесь плавной интеграцией внешних ссылок во вкладки Material-UI!