assistant-todo-mobile/src/App.js

import { BrowserRouter as Router, Route, Navigate, Routes } from 'react-router-dom';
import Home from './pages/Home';
import Map from './pages/Map';
import Index from './pages/Index'
import './pages/Bottom/index.css'
import CityList from './pages/CityList';
import { Todo, Message, PersonalCenter } from './pages/Bottom'
function App() {
  return (
    <Router>
      <div className='app'>
        {/* <div className='top'>
          <NavBar >配合路由使用</NavBar>
        </div> */}
        {/* <div className='body'> */}
        <Routes >
          {/* <Route path='/' element={<Navigate to="/home" />}>
          </Route> */}
          <Route path='/' element={<Home />}>
            <Route index path='/home' element={<Index />} />
            <Route path='/home/todo' element={<Todo />}></Route>
            <Route path='/home/message' element={<Message />}></Route>
            <Route path='/home/me' element={<PersonalCenter />}></Route>
          </Route>

          {/* <Route path='/home' element={<Home />}>
            <Route path='/home/todo' element={<Todo />}></Route>
            <Route path='/home/message' element={<Message />}></Route>
            <Route path='/home/me' element={<PersonalCenter />}></Route>
          </Route> */}
          {/* <Route path='/todo' element={<Todo />}></Route>
            <Route path='/message' element={<Message />}></Route>
            <Route path='/me' element={<PersonalCenter />}></Route> */}
          <Route path='/citylist' element={<CityList />}></Route>
          <Route path='/map' element={<Map />}></Route>
        </Routes>
        {/* </div> */}
        {/* <div>
          <Bottom />
        </div> */}
      </div>
    </Router>
  );
}

export default App;