如何在Ant设计选项卡组件中使用React Router Link组件

npm install react-router-dom

import { Tabs } from 'antd';
import { Link } from 'react-router-dom';

const { TabPane } = Tabs;

const MyTabs = () => {
  return (
    <Tabs defaultActiveKey="1">
      <TabPane tab="Tab 1" key="1">
        <Link to="/page1">Go to Page 1</Link>
      </TabPane>
      <TabPane tab="Tab 2" key="2">
        <Link to="/page2">Go to Page 2</Link>
      </TabPane>
      <TabPane tab="Tab 3" key="3">
        <Link to="/page3">Go to Page 3</Link>
      </TabPane>
    </Tabs>
  );
};

export default MyTabs;

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import MyTabs from './MyTabs';
import Page1 from './Page1';
import Page2 from './Page2';
import Page3 from './Page3';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={MyTabs} />
        <Route path="/page1" component={Page1} />
        <Route path="/page2" component={Page2} />
        <Route path="/page3" component={Page3} />
      </Switch>
    </Router>
  );
};

export default App;