Change tabs in Reactjs

Question

I'm new to React tabs. I have built tabs in bootstrap but the problem is, I don't know how I can open a new page when clicked on a tab.

Here is my code:

import { Container, Row, Tabs, Tab } from "react-bootstrap";
import React from "react";
import "./Tabs.css";
import BsTab from "./BsTab";

const BsTabs = () => {
  return (
    <div>
      <Container className="py-4">
        <Row className="justify-content-center">
          <Tabs
            justify
            variant="pills"
            defaultActiveKey="home"
            className="mb-1 p=0"
          >
            <Tab eventKey="kurye Tasimasi" title="Kurye Tasimasi">
              <BsTab />
            </Tab>
            <Tab eventKey="Hava Yolu Tasimasi" title="Hava Yolu Tasimasi">
              <BsTab />
            </Tab>
            <Tab eventKey="Deniz Yolu Tasimasi " title="Deniz Yolu Tasimasi">
              <BsTab />
            </Tab>
          </Tabs>
        </Row>
      </Container>
    </div>
  );
};

export default BsTabs;

So basically, what I want is to open a new page when clicked on one of the tabs.

Answer 1

If you want to open new pages when user click the tab, then why don't you just use links with target="_blank" instead of the Tabs/Tab modules?

Answer 2

You need to map each tab with the required URL. Have a look at the following pen: React tabs

const Tabs = ({ activeTab, tabsList, isFancyTabs = true }) => {
  const history = useHistory(),
    [isUrlTabs, setIsUrlTabs] = useState(false),
    [currentActiveTab, setCurrentActiveTab] = useState();

  useEffect(() => {
    if (tabsList.find((el) => el.tabUrl)) {
      setIsUrlTabs(true);
    } else {
      if (activeTab !== 0 && activeTab && activeTab < tabsList.length) {
        setCurrentActiveTab(activeTab);
      } else {
        setCurrentActiveTab(0);
      }
    }
    // eslint-disable-next-line
  }, []);

  useEffect(() => {
    if (isUrlTabs) {
      const currentActiveTabUrlIndex = tabsList.findIndex(
        (el) => el.tabUrl === history.location.pathname
      );
      setCurrentActiveTab(
        currentActiveTabUrlIndex !== -1 ? currentActiveTabUrlIndex : 0
      );
    }
    // eslint-disable-next-line
  }, [history.location.pathname, isUrlTabs]);

  const onChangeTab = (index, tabUrl) => {
    if (tabUrl) history.push(tabUrl);
    else setCurrentActiveTab(index);
  };

  return (
    <div className="tabs">
      <div
        className={`${isFancyTabs ? "fancy-labels-wrapper" : "labels-wrapper"}`}
      >
        <ConditionalWrapper
          initialWrapper={(children) => <Fragment>{children}</Fragment>}
          wrapper={(children) => <div className="labels">{children}</div>}
          condition={isFancyTabs}
        >
          {tabsList.map((el, i) => (
            <div
              className={
                "tab-label" +
                (currentActiveTab === i ? " active-tab-label" : "")
              }
              key={i}
              onClick={() => {
                onChangeTab(i, el.tabUrl);
              }}
            >
              {el.label}
            </div>
          ))}
        </ConditionalWrapper>
      </div>
      <div
        className="tabs-content-wrapper"
        style={{ borderRadius: isFancyTabs ? 10 : 0 }}
      >
        {tabsList.map((el, i) => (
          <div
            className={
              "tab-content" +
              (currentActiveTab === i ? " active-tab-content" : "")
            }
            key={i}
          >
            {currentActiveTab === i && el.content}
          </div>
        ))}
      </div>
    </div>
  );
};