要在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组件放在你的应用程序中的任何地方使用

antd标签页内link跳转失效

原文地址: https://www.cveoy.top/t/topic/hSLg 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录