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'
import ToDoList from "./pages/ToDoList";
import DetailForm from "./components/DetailForm";
import {NavBar} from "antd-mobile";
import DetailNavBar from "./components/DetailNavBar";

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={<ToDoList/>}></Route>
                        <Route path='/home/message' element={<Message/>}></Route>
                        <Route path='/home/me' element={<PersonalCenter/>}></Route>
                    </Route>
                    <Route path='/detail' element={<DetailNavBar/>}>
                        <Route path='addTask' element={<DetailForm/>}></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;