Moved routes path to a separate file

src/App.jsx

@@ -5,43 +5,10 @@ import '@fontsource/montserrat';
 
 // Components
 import PageLayout from "./components/PageLayout";
+import routes from "./components/RoutesPath";
 import Loading from "./components/Loading";
 
-// Pages
-const Home = lazy(() => import('./pages/Home'));
-const About = lazy(() => import('./pages/About'));
-const Contact = lazy(() => import('./pages/Contact'));
-
-const TopRatedGames = lazy(() => import('./pages/games/top'));
-const DisplayGameInfo = lazy(() => import('./pages/games/DisplayGameInfo'));
-
-const TopGamesStreaming = lazy(() => import(
-   './pages/streams'
-));
-const DisplayMostViewedStreams = lazy(() => import(
-   './pages/streams/DisplayMostViewedStreams'
-));
-const DisplayStreamsByGame = lazy(() => import(
-   './pages/streams/DisplayStreamsByGame'
-));
-const ErrorPage = lazy(() => import('./pages/404'));
-
-// Page path
-const routes = [
-   { path: "/", component: Home },
-   { path: "/about", component: About },
-   { path: "/Contact", component: Contact },
-   { path: "/games/top", component: TopRatedGames },
-   { path: "/games/:gId", component: DisplayGameInfo },
-   { path: "/streams/", component: TopGamesStreaming },
-   { path: "/streams/most-viewed", component: DisplayMostViewedStreams },
-   { path: "/streams/:gameId", component: DisplayStreamsByGame },
-
-
-   { path: "*", component: ErrorPage },
-];
-
-function App() {
+const App = () => {
    const [theme, setTheme] = useState(() =>
       localStorage.getItem("theme") || "dark");
 

src/components/RoutesPath.jsx

@@ -0,0 +1,32 @@
+import React, { lazy } from "react";
+
+// Pages
+const Home = lazy(() => import("../pages/Home"));
+const About = lazy(() => import("../pages/About"));
+const Contact = lazy(() => import("../pages/Contact"));
+const TopRatedGames = lazy(() => import("../pages/games/top"));
+const DisplayGameInfo = lazy(() => import("../pages/games/DisplayGameInfo"));
+const TopGamesStreaming = lazy(() => import("../pages/streams"));
+const ErrorPage = lazy(() => import("../pages/404"));
+
+const DisplayMostViewedStreams =
+lazy(() => import("../pages/streams/DisplayMostViewedStreams"));
+
+const DisplayStreamsByGame =
+lazy(() => import("../pages/streams/DisplayStreamsByGame"));
+
+
+// Page path
+const routes = [
+   { path: "/", component: Home },
+   { path: "/about", component: About },
+   { path: "/Contact", component: Contact },
+   { path: "/games/top", component: TopRatedGames },
+   { path: "/games/:gId", component: DisplayGameInfo },
+   { path: "/streams/", component: TopGamesStreaming },
+   { path: "/streams/most-viewed", component: DisplayMostViewedStreams },
+   { path: "/streams/:gameId", component: DisplayStreamsByGame },
+   { path: "*", component: ErrorPage },
+];
+
+export default routes;