更改Reactjs中的选项卡

Question

我是React选项卡的新手。我在引导程序中构建了选项卡，但问题是，我不知道如何在单击选项卡时打开新页面。

这是我的代码：

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;

所以基本上，我想要的是在点击其中一个选项卡时打开一个新页面。

Answer 1

如果您想在用户单击选项卡时打开新页面，那么为什么不使用target=&quot_空白"；而不是选项卡/选项卡模块？

Answer 2

您需要用所需的URL映射每个选项卡。看看下面的钢笔：反应标签

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>
);
};