Task 9: Create React Router configuration with lazy loading and route structure

apps/react/src/app/App.tsx

@@ -1,8 +1,13 @@
-export default function App() {
+import React, { Suspense } from 'react'
+import { RouterProvider } from 'react-router-dom'
+import { router } from './router/router'
+
+const App: React.FC = () => {
   return (
-    <div className="app" data-testid="page-loaded">
-      <h1>Aeroflot Flights - React Migration</h1>
-      <p>Coming soon...</p>
-    </div>
+    <Suspense fallback={<div>Loading...</div>}>
+      <RouterProvider router={router} />
+    </Suspense>
   )
 }
+
+export default App

apps/react/src/app/pages/BoardPage.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const BoardPage: React.FC = () => {
+  return (
+    <div className="board-page">
+      <h1>Online Board</h1>
+      <p>Arrivals and Departures</p>
+    </div>
+  )
+}

apps/react/src/app/pages/FlightsMapPage.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const FlightsMapPage: React.FC = () => {
+  return (
+    <div className="flights-map-page">
+      <h1>Flights Map</h1>
+      <p>Real-time Flight Map</p>
+    </div>
+  )
+}

apps/react/src/app/pages/NotFound.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const NotFound: React.FC = () => {
+  return (
+    <div className="page-not-found">
+      <h1>404 - Page Not Found</h1>
+      <p>The page you are looking for does not exist.</p>
+      <a href="/">Back to Home</a>
+    </div>
+  )
+}

apps/react/src/app/pages/SchedulePage.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const SchedulePage: React.FC = () => {
+  return (
+    <div className="schedule-page">
+      <h1>Schedule</h1>
+      <p>Flight Schedule</p>
+    </div>
+  )
+}

apps/react/src/app/pages/StartPage.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const StartPage: React.FC = () => {
+  return (
+    <div className="start-page">
+      <h1>Aeroflot Flights - Home</h1>
+      <p>Welcome to Aeroflot Flights</p>
+    </div>
+  )
+}

apps/react/src/app/router/router.tsx

@@ -0,0 +1,4 @@
+import { createBrowserRouter } from 'react-router-dom'
+import routes from './routes'
+
+export const router = createBrowserRouter(routes)

apps/react/src/app/router/routes.tsx

@@ -0,0 +1,39 @@
+import { RouteObject } from 'react-router-dom'
+import { NotFound } from '../pages/NotFound'
+
+const routes: RouteObject[] = [
+  {
+    path: '/',
+    lazy: async () => {
+      const { StartPage } = await import('../pages/StartPage')
+      return { Component: StartPage }
+    },
+  },
+  {
+    path: '/board',
+    lazy: async () => {
+      const { BoardPage } = await import('../pages/BoardPage')
+      return { Component: BoardPage }
+    },
+  },
+  {
+    path: '/schedule',
+    lazy: async () => {
+      const { SchedulePage } = await import('../pages/SchedulePage')
+      return { Component: SchedulePage }
+    },
+  },
+  {
+    path: '/flights-map',
+    lazy: async () => {
+      const { FlightsMapPage } = await import('../pages/FlightsMapPage')
+      return { Component: FlightsMapPage }
+    },
+  },
+  {
+    path: '*',
+    element: <NotFound />,
+  },
+]
+
+export default routes