antd-mobild+react-router-dom实现 tabs

你可以使用antd-mobile和react-router-dom来实现tabs功能。首先，你需要安装antd-mobile和react-router-dom依赖包。

npm install antd-mobile react-router-dom

接下来，你可以创建一个Tabs组件，并在其中使用antd-mobile的TabBar组件来实现tabs布局。然后，使用react-router-dom的Route组件来定义每个tab对应的页面。

import React from 'react';
import { TabBar } from 'antd-mobile';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Tabs = () => {
  const tabItems = [
    { title: 'Tab 1', path: '/tab1', component: Tab1 },
    { title: 'Tab 2', path: '/tab2', component: Tab2 },
    { title: 'Tab 3', path: '/tab3', component: Tab3 },
  ];

  const renderTabs = () => {
    return tabItems.map((item) => (
      <TabBar.Item
        key={item.path}
        title={item.title}
        icon={<div />}
        selectedIcon={<div />}
        selected={window.location.pathname === item.path}
        onPress={() => {
          window.location.href = item.path;
        }}
      />
    ));
  };

  return (
    <Router>
      <div style={{ position: 'fixed', width: '100%', bottom: 0 }}>
        <TabBar>{renderTabs()}</TabBar>
      </div>

      {/* Define routes */}
      {tabItems.map((item) => (
        <Route key={item.path} path={item.path} component={item.component} />
      ))}
    </Router>
  );
};

const Tab1 = () => <div>Tab 1 content</div>;
const Tab2 = () => <div>Tab 2 content</div>;
const Tab3 = () => <div>Tab 3 content</div>;

export default Tabs;

在上面的代码中，我们定义了三个tab，分别对应不同的路径和组件。通过点击tab，我们可以切换显示不同的内容。你可以根据自己的需求修改tab的数量、标题、路径和对应的组件。

希望这可以帮助你实现antd-mobile和react-router-dom的tabs功能！