assistant-todo-mobile/src/App.js

import {BrowserRouter as Router, Route, Navigate, Routes} from 'react-router-dom';
import Home from './pages/Home';
import './pages/Bottom/index.css'
import ToDoList from "./pages/ToDoList";
import DetailForm from "./components/DetailForm";
import DetailNavBar from "./components/DetailNavBar";
import DetailSearchContext from "./pages/DetailSearchContext";
import ToDoCal from "./pages/ToDoCal";
import ToDoTree from "./pages/ToDoTree";
import {PersonalCenter} from "./pages/PersonalCenter";
import {MyRootProvider} from "./components/MyRootContext";

function App() {
    return (
        <MyRootProvider>
            <Router>
                <div className='app'>
                    <Routes>
                        <Route path='/' element={<Navigate to="/mobile/listTask"/>}>

                        </Route>
                        <Route path='/mobile' element={<Home/>}>
                            {/*<Route index element={<ToDoList />} />*/}
                            <Route path='treeTask' element={<ToDoTree/>}/>
                            <Route path='listTask' element={<ToDoList/>}></Route>
                            <Route path='calTask' element={<ToDoCal/>}/>
                            <Route path='me' element={<PersonalCenter/>}></Route>
                        </Route>
                        <Route path='/detail' element={<DetailNavBar/>}>
                            <Route path='addTask' element={<DetailForm/>}></Route>
                            <Route path='searchTask' element={<DetailSearchContext/>}></Route>
                            <Route path='updateTask' element={<DetailForm/>}></Route>
                            <Route path='selectTask' element={<DetailForm/>}></Route>
                        </Route>
                    </Routes>
                </div>
            </Router>
        </MyRootProvider>
    );
}

export default App;