antd标签页内link跳转失效
要在Antd标签页内使用Link组件进行跳转,需要将Link组件包裹在一个Router组件内。下面是一个示例代码:
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { Tabs } from 'antd';
const { TabPane } = Tabs;
const MyComponent = () => {
return (
<Router>
<Tabs defaultActiveKey="1">
<TabPane tab={<Link to="/page1">Page 1</Link>} key="1">
<Route path="/page1" render={() => <div>Page 1 content</div>} />
</TabPane>
<TabPane tab={<Link to="/page2">Page 2</Link>} key="2">
<Route path="/page2" render={() => <div>Page 2 content</div>} />
</TabPane>
</Tabs>
</Router>
);
};
export default MyComponent;
在这个示例中,我们使用了react-router-dom库中的BrowserRouter和Link组件来实现内部的路由跳转。每个TabPane都包含一个Route组件,用来渲染对应的页面内容。
确保你的项目中已经安装了react-router-dom库,可以使用以下命令进行安装:
npm install react-router-dom
然后,你可以将MyComponent组件放在你的应用程序中的任何地方使用
原文地址: https://www.cveoy.top/t/topic/hSLg 著作权归作者所有。请勿转载和采集!