Добавлен роутер

bro.config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const pkg = require('./package');
 
 module.exports = {
@@ -9,7 +10,8 @@ module.exports = {
   },
   /* use https://admin.bro-js.ru/ to create config, navigations and features */
   navigations: {
-    'kfu-24-teacher.main': '/kfu-24-teacher'
+    'kfu-24-teacher.main': '/kfu-24-teacher',
+    'kfu-24-teacher.detail': '/kfu-24-teacher/detail'
   },
   features: {
     'kfu-24-teacher': {

package-lock.json

@@ -9,10 +9,11 @@
             "version": "0.0.0",
             "license": "ISC",
             "dependencies": {
-                "@brojs/cli": "^1.0.0",
+                "@brojs/cli": "^1.6.1",
                 "express": "^4.19.2",
                 "react": "^18.3.1",
-                "react-dom": "^18.3.1"
+                "react-dom": "^18.3.1",
+                "react-router-dom": "^6.28.0"
             },
             "devDependencies": {
                 "@eslint/js": "^9.14.0",
@@ -2253,6 +2254,15 @@
                 "url": "https://opencollective.com/unts"
             }
         },
+        "node_modules/@remix-run/router": {
+            "version": "1.21.0",
+            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
+            "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
         "node_modules/@types/eslint": {
             "version": "9.6.1",
             "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
@@ -7988,6 +7998,38 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/react-router": {
+            "version": "6.28.0",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
+            "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
+            "license": "MIT",
+            "dependencies": {
+                "@remix-run/router": "1.21.0"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8"
+            }
+        },
+        "node_modules/react-router-dom": {
+            "version": "6.28.0",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz",
+            "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==",
+            "license": "MIT",
+            "dependencies": {
+                "@remix-run/router": "1.21.0",
+                "react-router": "6.28.0"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8",
+                "react-dom": ">=16.8"
+            }
+        },
         "node_modules/readdirp": {
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",

package.json

@@ -17,7 +17,8 @@
         "@brojs/cli": "^1.6.1",
         "express": "^4.19.2",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.28.0"
     },
     "devDependencies": {
         "@eslint/js": "^9.14.0",

src/app.tsx

@@ -1,15 +1,8 @@
 import React from 'react';
+import Main from './container/main';
 
 const App = () => {
-  return (
-    <h1>
-      Hello world для проекта - kfu-24-teacher asd as das das d as{' '}
-      <div>
-        {' '}
-        asda s <span>123</span>
-      </div>
-    </h1>
-  );
+  return <Main />;
 };
 
 export default App;

src/container/detail/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const DetailPage = (): React.ReactElement => {
+  return <h1>Detail Page</h1>;
+};
+
+export default DetailPage;

src/container/list/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ListPage = (): React.ReactElement => {
+  return <h1>List Page</h1>;
+};
+
+export default ListPage;

src/container/main/components/layout/header.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { getNavigationsValue } from '@brojs/cli';
+
+const navigations: Array<{ name: string; href: string }> = [
+  {
+    name: 'Главная',
+    href: getNavigationsValue('kfu-24-teacher.main')
+  },
+  {
+    name: 'Детальная информация',
+    href: getNavigationsValue('kfu-24-teacher.detail')
+  }
+];
+
+const Header = (): React.ReactElement => {
+  return (
+    <header>
+      <ul>
+        {navigations.map((item) => {
+          return (
+            <li key={item.name}>
+              <Link to={item.href}>{item.name}</Link>
+            </li>
+          );
+        })}
+      </ul>
+    </header>
+  );
+};
+
+export default Header;

src/container/main/components/layout/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import Header from './header';
+
+const Layout = (): React.ReactElement => {
+  return (
+    <>
+      <Header />
+      <main>
+        <Outlet />
+      </main>
+    </>
+  );
+};
+
+export default Layout;

src/container/main/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './router';
+
+const Main = (): React.ReactElement => {
+  return <RouterProvider router={router} />;
+};
+
+export default Main;

src/container/main/router.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { createBrowserRouter } from 'react-router-dom';
+import ListPage from '../list';
+import DetailPage from '../detail';
+import { getNavigationsValue } from '@brojs/cli';
+import Layout from './components/layout';
+
+export const router = createBrowserRouter([
+  {
+    path: getNavigationsValue('kfu-24-teacher.main'),
+    element: <Layout />,
+    children: [
+      {
+        path: getNavigationsValue('kfu-24-teacher.main'),
+        element: <ListPage />
+      },
+      {
+        path: getNavigationsValue('kfu-24-teacher.detail'),
+        element: <DetailPage />
+      }
+    ]
+  }
+]);