done

src/App.tsx

-import React from 'react'
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import './App.css'
-import HomePage from './Pages/Learn/HomePage/Home.page'
-import DrawerAppBar from './Components/DrawerAppBar/DrawerAppBar'
-import RegisterPage from './Pages/Learn/RegisterPage/Register.page'
-import Login from './Pages/Learn/LoginPage/Login.page'
-import SelectDifficultyPage from './Pages/Learn/SelectDifficultyPage/SelectDifficulty.page'
-import ResourcesPage from './Pages/Learn/ResourcesPage/Resources.page'
-import MoreResourcesPage from './Pages/Learn/MoreResourcesPage/MoreResources.page'
-import MoreResourcesDetailsPage from './Pages/Learn/MoreResourcesDetailsPage/MoreResourcesDetails.page'
-import GameDetails from './Pages/Learn/GameDetailsPage/GameDetails.page'
-import GamePage from './Pages/Learn/GamePage/game.page'
-import Dictionary from './Pages/Learn/DictionaryPage/Dictionary.page'
-// import ResourcesPages from './Pages/Learn/backup/Resources.page';
-
-function App() {
-  return (
-    <BrowserRouter>
-      <Routes>
-        <Route element={<DrawerAppBar />}>
-          <Route path='/' element={<HomePage />} />
-          <Route path='/select' element={<SelectDifficultyPage />} />
-          <Route path='/resources/:level' element={<ResourcesPage />} />
-          <Route path='/moreResources/:resourcesId' element={<MoreResourcesPage />} />
-          <Route path='/moreResourcesDetails/:itemId' element={<MoreResourcesDetailsPage />} />
-          <Route path='/game/:resourcesId' element={<GamePage />} />
-          <Route path='/gameDetails/:gameId/:resourcesId' element={<GameDetails />} />
-          <Route path='/register' element={<RegisterPage />} />
-          <Route path='/login' element={<Login />} />
-          <Route path='/dictionary' element={<Dictionary />} />
-          {/* <Route path="/c" element={<ResourcesPages />} /> */}
-        </Route>
-      </Routes>
-    </BrowserRouter>
-  )
-}
-
-export default App

src/Pages/Learn/Test/Test.page.tsx

@@ -3,6 +3,20 @@ import { Box, Container } from '@mui/material'
 import Webcam from 'react-webcam'
 import axios from 'axios'
 
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import './App.css'
+import HomePage from './Pages/Learn/HomePage/Home.page'
+import DrawerAppBar from './Components/DrawerAppBar/DrawerAppBar'
+import RegisterPage from './Pages/Learn/RegisterPage/Register.page'
+import Login from './Pages/Learn/LoginPage/Login.page'
+import SelectDifficultyPage from './Pages/Learn/SelectDifficultyPage/SelectDifficulty.page'
+import ResourcesPage from './Pages/Learn/ResourcesPage/Resources.page'
+import MoreResourcesPage from './Pages/Learn/MoreResourcesPage/MoreResources.page'
+import MoreResourcesDetailsPage from './Pages/Learn/MoreResourcesDetailsPage/MoreResourcesDetails.page'
+import GameDetails from './Pages/Learn/GameDetailsPage/GameDetails.page'
+import GamePage from './Pages/Learn/GamePage/game.page'
+import Dictionary from './Pages/Learn/DictionaryPage/Dictionary.page'
+
 const WebcamComponent: React.FC = () => {
   const webcamRef = React.useRef<Webcam>(null)
   const canvasRef = React.useRef<HTMLCanvasElement>(null)
@@ -101,3 +115,28 @@ const WebcamComponent: React.FC = () => {
 }
 
 export default WebcamComponent
+// import ResourcesPages from './Pages/Learn/backup/Resources.page';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route element={<DrawerAppBar />}>
+          <Route path='/' element={<HomePage />} />
+          <Route path='/select' element={<SelectDifficultyPage />} />
+          <Route path='/resources/:level' element={<ResourcesPage />} />
+          <Route path='/moreResources/:resourcesId' element={<MoreResourcesPage />} />
+          <Route path='/moreResourcesDetails/:itemId' element={<MoreResourcesDetailsPage />} />
+          <Route path='/game/:resourcesId' element={<GamePage />} />
+          <Route path='/gameDetails/:gameId/:resourcesId' element={<GameDetails />} />
+          <Route path='/register' element={<RegisterPage />} />
+          <Route path='/login' element={<Login />} />
+          <Route path='/dictionary' element={<Dictionary />} />
+          {/* <Route path="/c" element={<ResourcesPages />} /> */}
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  )
+}
+
+export default App