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

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 />
+      }
+    ]
+  }
+]);