使用反应蚂蚁设计更改时如何更改每个选项卡的链接？

Question

我使用的是Ant设计选项卡，但我的要求是，当我们转到每个选项卡时，我想更改链接。下面是我的代码。但在这里，当我点击第二个选项卡时，它显示的是空白页。选项卡的内容未显示。有人能给我推荐解决方案吗？

代码：

const TabContainer =()=>{
const handleTabClick =(key) => {
history.push(`/${key}`)   

}
render = () => (
<Tabs defaultActiveKey="history" onChange={handleTabClick}>
<TabPane tab="Tab 1" key="history">History</TabPane>
<TabPane tab="Tab 2" key="math">Math</TabPane>
<TabPane tab="Tab 3" key="science">Science</TabPane>
</Tabs>
)

Answer 1

如果要使用url/history控制活动选项卡，请使用activeKey。defaultActiveKey仅定义一个起始点

const TabContainer =()=> {
const handleTabClick =(key) => {
history.push(`/${key}`)   
}
render = () => (
<Tabs activeKey={location.pathname.slice(1)} onChange={handleTabClick}>
<TabPane tab="Tab 1" key="history">History</TabPane>
<TabPane tab="Tab 2" key="math">Math</TabPane>
<TabPane tab="Tab 3" key="science">Science</TabPane>
</Tabs>
)
}