ant-Buttom

src/App.js

@@ -1,24 +1,25 @@
-import './App.css';
-import {Button} from 'antd-mobile'
-import { BrowserRouter as Router,Route,Link, Routes } from 'react-router-dom';
-import Home from './pages/Home'
-import CityList from './pages/CityList';
-import News from './pages/News';
-import './index.css';
+import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
+import { Home, Todo, Message, PersonalCenter, Bottom } from './pages/Buttom/index'
+import './pages/Buttom/index.css'
+import { NavBar, TabBar } from 'antd-mobile'
 function App() {
   return (
     <Router>
-      <div className="App">
-        <ul>
-          <li><Link to='/home'>首页</Link></li>
-          <li><Link to='/citylist'>城市</Link></li>
-        </ul>
-        <Routes>
-          <Route path='/home' element={<Home/>}>
-            <Route path='news' element={<News />}/>
-          </Route>
-          <Route path='/citylist' element={<CityList/>}/>
-        </Routes>
+      <div className='app'>
+        <div className='top'>
+          <NavBar >配合路由使用</NavBar>
+        </div>
+        <div className='body'>
+          <Routes>
+            <Route path='/home' element={<Home />}></Route>
+            <Route path='/todo' element={<Todo />}></Route>
+            <Route path='/message' element={<Message />}></Route>
+            <Route path='/me' element={<PersonalCenter />}></Route>
+          </Routes>
+        </div>
+        <div>
+          <Bottom />
+        </div>
       </div>
     </Router>
   );

src/pages/Buttom/index.css

@@ -0,0 +1,25 @@
+.app {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.top {
+  flex: 0;
+  border-bottom: solid 1px var(--adm-color-border);
+}
+
+.body {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.adm-tab-bar {
+  flex: 0;
+  border-top: solid 1px var(--adm-color-border);
+  width:100%;
+  position: fixed;
+  bottom:0;
+}

src/pages/Buttom/index.js

@@ -0,0 +1,69 @@
+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 />,
+      },
+      {
+        key: '/todo',
+        title: '待办',
+        icon: <UnorderedListOutline />,
+      },
+      {
+        key: '/message',
+        title: '消息',
+        icon: <MessageOutline />,
+      },
+      {
+        key: '/me',
+        title: '我的',
+        icon: <UserOutline />,
+      },
+    ]
+  
+    return (
+      <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
+        {tabs.map(item => (
+          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
+        ))}
+      </TabBar>
+    )
+  }
+  export function Home() {
+    return <div>首页</div>
+  }
+  
+  export function Todo() {
+    return <div>待办</div>
+  }
+  
+  export function Message() {
+    return <div>消息</div>
+  }
+  
+  export function PersonalCenter() {
+    return <div>我的</div>
+  }

src/pages/Home/index.js

@@ -1,10 +0,0 @@
-import React from "react";
-import { Routes,Route } from "react-router-dom";
-import News from "../News";
-export default class Home extends React.Component{
-    render(){
-        return (<div style={{backgroundColor:'yellow',padding:10}}>首页
-        <Routes><Route path='news' element={<News />}/></Routes>
-        </div>)
-    }
-}