Добавлен react router и mobx

frontend/package-lock.json

@@ -15,8 +15,11 @@
         "@types/node": "^16.18.14",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
+        "mobx": "^6.9.0",
+        "mobx-state-tree": "^5.1.8",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.11.1",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
@@ -3077,6 +3080,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.1.tgz",
+      "integrity": "sha512-YUkWj+xs0oOzBe74OgErsuR3wVn+efrFhXBWrit50kOiED+pvQe2r6MWY0iJMQU/mSVKxvNzL4ZaYvjdX+G7ZA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -11849,6 +11860,27 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/mobx": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.9.0.tgz",
+      "integrity": "sha512-HdKewQEREEJgsWnErClfbFoVebze6rGazxFLU/XUyrII8dORfVszN1V0BMRnQSzcgsNNtkX8DHj3nC6cdWE9YQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mobx"
+      }
+    },
+    "node_modules/mobx-state-tree": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/mobx-state-tree/-/mobx-state-tree-5.1.8.tgz",
+      "integrity": "sha512-oe82BNgMr408e6DxMDNat8msXQTuyuqzJ97DPupbhchEfjjHyjsmPSwtXHl+nXiW3tybpb/cr5siUClBqKqv+Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mobx"
+      },
+      "peerDependencies": {
+        "mobx": "^6.3.0"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -14090,6 +14122,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.1.tgz",
+      "integrity": "sha512-OZINSdjJ2WgvAi7hgNLazrEV8SGn6xrKA+MkJe9wVDMZ3zQ6fdJocUjpCUCI0cNrelWjcvon0S/QK/j0NzL3KA==",
+      "dependencies": {
+        "@remix-run/router": "1.6.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.1.tgz",
+      "integrity": "sha512-dPC2MhoPeTQ1YUOt5uIK376SMNWbwUxYRWk2ZmTT4fZfwlOvabF8uduRKKJIyfkCZvMgiF0GSCQckmkGGijIrg==",
+      "dependencies": {
+        "@remix-run/router": "1.6.1",
+        "react-router": "6.11.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -19004,6 +19066,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.1.tgz",
+      "integrity": "sha512-YUkWj+xs0oOzBe74OgErsuR3wVn+efrFhXBWrit50kOiED+pvQe2r6MWY0iJMQU/mSVKxvNzL4ZaYvjdX+G7ZA=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -25410,6 +25477,17 @@
         "minimist": "^1.2.6"
       }
     },
+    "mobx": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.9.0.tgz",
+      "integrity": "sha512-HdKewQEREEJgsWnErClfbFoVebze6rGazxFLU/XUyrII8dORfVszN1V0BMRnQSzcgsNNtkX8DHj3nC6cdWE9YQ=="
+    },
+    "mobx-state-tree": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/mobx-state-tree/-/mobx-state-tree-5.1.8.tgz",
+      "integrity": "sha512-oe82BNgMr408e6DxMDNat8msXQTuyuqzJ97DPupbhchEfjjHyjsmPSwtXHl+nXiW3tybpb/cr5siUClBqKqv+Q==",
+      "requires": {}
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -26840,6 +26918,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.1.tgz",
+      "integrity": "sha512-OZINSdjJ2WgvAi7hgNLazrEV8SGn6xrKA+MkJe9wVDMZ3zQ6fdJocUjpCUCI0cNrelWjcvon0S/QK/j0NzL3KA==",
+      "requires": {
+        "@remix-run/router": "1.6.1"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.1.tgz",
+      "integrity": "sha512-dPC2MhoPeTQ1YUOt5uIK376SMNWbwUxYRWk2ZmTT4fZfwlOvabF8uduRKKJIyfkCZvMgiF0GSCQckmkGGijIrg==",
+      "requires": {
+        "@remix-run/router": "1.6.1",
+        "react-router": "6.11.1"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

frontend/package.json

@@ -10,8 +10,11 @@
     "@types/node": "^16.18.14",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "mobx": "^6.9.0",
+    "mobx-state-tree": "^5.1.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

frontend/src/App.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import './App.css';
-import StartPage from './start-page/start-page';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './router';
 
 function App() {
   return (
     <>
-      <StartPage />
+      <React.StrictMode>
+        <RouterProvider router={router} />
+      </React.StrictMode>
     </>
   );
 }

frontend/src/router.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { createBrowserRouter } from "react-router-dom";
+import StartPage from "./start-page/start-page";
+import UnknownPage from "./unknown-page";
+
+export const router = createBrowserRouter([
+	{
+		path: "/",
+		element: (<StartPage/>),
+  },
+	{
+		path: "*",
+		element: (<UnknownPage/>)
+	}
+]);

frontend/src/unknown-page.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const UnknownPage = () => {
+	return (
+		<p>Unknown page</p>
+	)
+};
+
+export default UnknownPage;