-
Дашборд
+
+
Компонент Dashboard
-
+
История заказов
+
+
+
+
+ | Дата |
+ Заказ |
+ Сумма |
+
+
+
+
+ | 01.01.2023 |
+ Заказ 1 |
+ $100 |
+
+
+ | 02.01.2023 |
+ Заказ 2 |
+ $200 |
+
+
+
{/* Outlet рендерит дочерние маршруты */}
- [][][]
- [][][]
);
};
const Profile: React.FC = () => {
- return
Профиль
;
+ return
Компонент Profile
+
+
Имя: Иван
+
Фамилия: Иванов
+
Возраст: 30
+
Страна: Россия
+
Город: Москва
+
;
};
const Settings: React.FC = () => {
- return <>
-
Настройки2
;
-
-
+ return
+
Компонент Settings
+ Открыть опции
+
+
};
-const Settings3Level: React.FC = () => {
- return
Настройки3
;
+const Options: React.FC = () => {
+ return
Компонент Options
+
Закрыть
;
};
@@ -58,23 +87,22 @@ const OutletApp: React.FC = () => {
return (
+
+ -
+ Главная
+
+ -
+ Дашборд
+
+
+
} />
}>
} />
}>
- }/>
+ } />
-
diff --git a/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/RouteParamsApp.tsx b/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/RouteParamsApp.tsx
index 7bac76d7f..17a4cbdab 100644
--- a/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/RouteParamsApp.tsx
+++ b/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/RouteParamsApp.tsx
@@ -1,11 +1,25 @@
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom';
import './App.css';
+import { NotFound } from './Components/NotFound';
+
+// Компонент для страницы пользователя
+const Main: React.FC = () => {
+
+ return <>
+
+
Текст главной страницы с примером ссылки в тексте
+
+ ;
+};
// Компонент для страницы пользователя
const User: React.FC = () => {
- const { id } = useParams<{ id: string }>(); // Извлекаем параметр id из URL с помощью хука useParams
- return
Пользователь с ID: {id}
;
+ const { id, name } = useParams<{ id: string, name:string }>(); // Извлекаем параметр id из URL с помощью хука useParams
+ return
+
Пользователь с ID: {id}
+ Детали пользователя {id}
+ ;
};
const RouteParamsApp: React.FC = () => {
@@ -13,20 +27,25 @@ const RouteParamsApp: React.FC = () => {
- Страница Пользователь 1
- } />
+ } />
+ } />
+ } /> {/* Страница 404 */}
+
+
);
};
diff --git a/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/UseNavigateApp.tsx b/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/UseNavigateApp.tsx
index b75c1dedd..6383f1acd 100644
--- a/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/UseNavigateApp.tsx
+++ b/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/UseNavigateApp.tsx
@@ -10,15 +10,30 @@ const Home: React.FC = () => {
};
return (
-
-
Главная страница
-
+
+
Главная страница
+
+
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis asperiores soluta incidunt officia eum reprehenderit modi repudiandae pariatur quidem dolore?
+
+
);
};
const About: React.FC = () => {
- return
О нас
;
+ const navigate = useNavigate();
+ const goToHomePage = () => {
+ navigate('/'); // Переход на страницу "О нас"
+ };
+ return
+
Про useNavigate
+
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, ipsam sapiente omnis dicta mollitia quo id quaerat delectus culpa dolor!
+
+
+
;
};
const UseNavigateApp: React.FC = () => {
diff --git a/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/components/NotFound.tsx b/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/components/NotFound.tsx
new file mode 100644
index 000000000..e99f56270
--- /dev/null
+++ b/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/components/NotFound.tsx
@@ -0,0 +1,4 @@
+// Компонент для страницы 404
+export const NotFound: React.FC = () => {
+ return
Страница не найдена
;
+ };
\ No newline at end of file
diff --git a/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/index.css b/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/index.css
index 6119ad9a8..11c2a482d 100644
--- a/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/index.css
+++ b/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/index.css
@@ -66,3 +66,14 @@ button:focus-visible {
background-color: #f9f9f9;
}
}
+
+.block {
+ display: block;
+ width: 100%;
+}
+
+.page {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 2em;
+}
\ No newline at end of file
diff --git a/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/main.tsx b/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/main.tsx
index 981b9145a..8e3a818d0 100644
--- a/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/main.tsx
+++ b/Lessons/Module 5. Frontend/3.react-basic-router-redux/react-router-basic/src/main.tsx
@@ -8,11 +8,11 @@ import OutletApp from './OutletApp.tsx'
import NavigateApp from './NavigateApp.tsx'
createRoot(document.getElementById('root')!).render(
-
- {/* */}
+ <>
+
{/* */}
{/* */}
+ {/* */}
{/* */}
-
- ,
+
)