assistant-todo-mobile/src/pages/Bottom/index.js

import React ,{FC} from "react";
import { NavBar, TabBar } from 'antd-mobile'
import {
  Route,Routes,
  useLocation,
  MemoryRouter as Router,
  useNavigate,
} from 'react-router-dom'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
export function Bottom (){
    const navigate = useNavigate();
    const location = useLocation()
    const { pathname } = location
  
    const setRouteActive = (value) => {
      navigate(value)
    }
  
    const tabs = [
      {
        key: '/home',
        title: '首页',
        icon: <AppOutline />,
        badge: '1',
      },
      {
        key: '/todo',
        title: '待办',
        icon: <UnorderedListOutline />,
        badge: '2',
      },
      {
        key: '/message',
        title: '消息',
        icon: <MessageOutline />,
        badge: '3',
      },
      {
        key: '/me',
        title: '我的',
        icon: <UserOutline />,
        badge: '4',
      },
    ]
  
    return (
      <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} badge= {item.badge}/>
        ))}
      </TabBar>
    )
  }

  
  export function Todo() {
    return <div>待办</div>
  }
  
  export function Message() {
    return <div>消息</div>
  }
  
  export function PersonalCenter() {
    return <div>我的</div>
  }