React——Ant Design Mobile的TabBar标签栏的简单使用（配合路由）

react-router-dom不同版本的API有些不同，可能会出现一些bug，这里用的版本是：

在App.js中引入路由和TabBar组件

import './App.css';

// 引入路由组件
import { BrowserRouter as Router } from 'react-router-dom'
//引入自定义TabBar组件
import Tabbar from './components/tabbar/Tabbar';

// 引入自定义路由组件
import RouteList from './routers'

function App() {
  return (
    <div className="App">
      <Router>
        <RouteList></RouteList>
        <Tabbar></Tabbar>
      </Router>
    </div>
  );
}

export default App;

TabBar组件

import React from 'react'
import './Tabbar.css'
// 引入tabbar组件
import { TabBar } from 'antd-mobile'
// 引入路由组件
import {
    //版本不同API会有差别
    useNavigate,
    useLocation,
} from 'react-router-dom'
// 引入图标组件
import {
    AppOutline,
    MessageOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'

// TabBar 配置
const tabs = [
    {
        url: '/home',
        title: '首页',
        icon: <AppOutline />,
    },
    {
        url: '/todo',
        title: '待办',
        icon: <UnorderedListOutline />,
    },
    {
        url: '/message',
        title: '消息',
        icon: <MessageOutline />,
    },
    {
        url: '/me',
        title: '我的',
        icon: <UserOutline />,
    }
]

const Bottom = () => {
    const navigate= useNavigate()
    const { pathname } = useLocation()
    return (
        <TabBar activeKey={pathname} onChange={value => navigate(value)}>
            {tabs.map(item => (
                <TabBar.Item key={item.url} icon={item.icon} title={item.title} />
            ))}
        </TabBar>
    )
}

export default function Tabbar() {
    return (
        <div className='tab-bar'>
            <Bottom />
        </div>
    )
}

antd-mobile中TabBar标签栏没有样式，需要自己添加样式

.tab-bar {
  background: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}