routing and fetching data

frontend_reactjs/src/App.tsx

@@ -1,26 +1,24 @@
-import { useState,useEffect } from 'react'
-import Card from './components/Card'
-import axios from 'axios'
-interface ICard{
-  firstname: string
-  lastname: string
-  email: string
-}
+import { BrowserRouter as Router, Routes,Route} from "react-router-dom"
+import Users from "./pages/Users"
+import Roles from "./pages/Roles"
+import Main from "./pages/Main"
+import NotFound from "./pages/NotFound"
+import Navigate from "./components/Navigate"
 
 function App() {
-  // const data = [
-  //   {firstname:"Иван",lastname:"Петров", email:"email@test.ru"},
-  //   {firstname:"Алексей",lastname:"Петров", email:"email2@test.ru"},
-  //   {firstname:"Василиса",lastname:"Петрова", email:"email3@test.ru"}
-  // ]
-  const [cards, setCards] = useState<ICard[]>([]);
-  useEffect(()=>{axios.get("http://localhost:8000/auth/user/").then((res) =>{setCards(res.data as ICard[]);})},[])
-  console.log(cards)
   return (
     <>
-      {cards.map((card, index) => <Card key={index} {...card}/>)}
+    <Navigate />
+    <Router>
+      <Routes>
+        <Route index  path="/" element={ <Main />} />
+        <Route path="/user" element={ <Users />} />
+        <Route path="/role" element={ <Roles />} />
+        <Route path="*" element={<NotFound />}/>
+      </Routes>
+    </Router>
     </>
   )
 }
 
-export default App
+export default App