From 95f49d7deb8728ce19d91d6e1c3b94020a39f99a Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gnerim.ru>
Date: Sun, 5 Apr 2026 19:20:23 +0300
Subject: [PATCH] Task 9: Create React Router configuration with lazy loading
 and route structure

---
 apps/react/src/app/App.tsx                  | 15 +++++---
 apps/react/src/app/pages/BoardPage.tsx      | 10 ++++++
 apps/react/src/app/pages/FlightsMapPage.tsx | 10 ++++++
 apps/react/src/app/pages/NotFound.tsx       | 11 ++++++
 apps/react/src/app/pages/SchedulePage.tsx   | 10 ++++++
 apps/react/src/app/pages/StartPage.tsx      | 10 ++++++
 apps/react/src/app/router/router.tsx        |  4 +++
 apps/react/src/app/router/routes.tsx        | 39 +++++++++++++++++++++
 8 files changed, 104 insertions(+), 5 deletions(-)
 create mode 100644 apps/react/src/app/pages/BoardPage.tsx
 create mode 100644 apps/react/src/app/pages/FlightsMapPage.tsx
 create mode 100644 apps/react/src/app/pages/NotFound.tsx
 create mode 100644 apps/react/src/app/pages/SchedulePage.tsx
 create mode 100644 apps/react/src/app/pages/StartPage.tsx
 create mode 100644 apps/react/src/app/router/router.tsx
 create mode 100644 apps/react/src/app/router/routes.tsx

diff --git a/apps/react/src/app/App.tsx b/apps/react/src/app/App.tsx
index 925de583d..bd0f9caa2 100644
--- a/apps/react/src/app/App.tsx
+++ b/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
diff --git a/apps/react/src/app/pages/BoardPage.tsx b/apps/react/src/app/pages/BoardPage.tsx
new file mode 100644
index 000000000..2fb71d253
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/apps/react/src/app/pages/FlightsMapPage.tsx b/apps/react/src/app/pages/FlightsMapPage.tsx
new file mode 100644
index 000000000..88ffaee7e
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/apps/react/src/app/pages/NotFound.tsx b/apps/react/src/app/pages/NotFound.tsx
new file mode 100644
index 000000000..a194705b1
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/apps/react/src/app/pages/SchedulePage.tsx b/apps/react/src/app/pages/SchedulePage.tsx
new file mode 100644
index 000000000..6257fe88a
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/apps/react/src/app/pages/StartPage.tsx b/apps/react/src/app/pages/StartPage.tsx
new file mode 100644
index 000000000..3cde410ed
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/apps/react/src/app/router/router.tsx b/apps/react/src/app/router/router.tsx
new file mode 100644
index 000000000..f18e69a39
--- /dev/null
+++ b/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)
diff --git a/apps/react/src/app/router/routes.tsx b/apps/react/src/app/router/routes.tsx
new file mode 100644
index 000000000..7b8af92fb
--- /dev/null
+++ b/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