Маршрут по тайным тропам

Readme.md

@@ -2,6 +2,7 @@
 
 - Студент: [Анастасия Сайдазимова](https://up.htmlacademy.ru/react-individual/2/user/2554551).
 - Наставник: `Артём Новоселов`.
+- [Просмотр проекта](https://2554551-six-cities-2-92qvbhbt8-nslyumas-projects.vercel.app/)
 
 ---
 

src/components/app/app.tsx

@@ -1,9 +1,32 @@
 /* eslint-disable arrow-body-style */
-
-import Main from '../main/main';
+import { Route, BrowserRouter, Routes } from 'react-router-dom';
+import { AppRoute, AuthorizationStatus } from '../../const';
+import Main from '../../pages/main/main';
+import Login from '../../pages/login/login';
+import Favorites from '../../pages/favorites/favorites';
+import Offer from '../../pages/offer/offer';
+import NotFound from '../../pages/not-found/not-found';
+import PrivateRoute from '../private-route/private-route';
 
 const App = () => {
-  return <Main />;
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path={AppRoute.Main} element={<Main />} />
+        <Route path={AppRoute.Login} element={<Login />} />
+        <Route
+          path={AppRoute.Favorites}
+          element={
+            <PrivateRoute authorizationStatus={AuthorizationStatus.NoAuth}>
+              <Favorites />
+            </PrivateRoute>
+          }
+        />
+        <Route path={AppRoute.Offer} element={<Offer />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </BrowserRouter>
+  );
 };
 
 export default App;

src/components/private-route/private-route.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { AppRoute, AuthorizationStatus } from '../../const';
+
+// Сборка не проходит, если испльзовать PropsWithChildren и не указать тип Navigate
+// 'PrivateRoute' cannot be used as a JSX component.
+// Its return type 'string | number | boolean | Element | Iterable<ReactNode> | null | undefined' is not a valid JSX element.
+// Type 'undefined' is not assignable to type 'Element | null'.
+
+// type Props = PropsWithChildren<{ authorizationStatus: AuthorizationStatus }>;
+type Props = {
+  authorizationStatus: AuthorizationStatus;
+  children: React.JSX.Element;
+};
+
+const PrivateRoute = ({ authorizationStatus, children }: Props) =>
+  authorizationStatus === AuthorizationStatus.Auth
+    ? children
+    : ((<Navigate to={AppRoute.Login} />) as React.JSX.Element);
+
+export default PrivateRoute;

src/const.ts

@@ -0,0 +1,12 @@
+export enum AppRoute {
+  Main = '/',
+  Login = '/login',
+  Favorites = '/favorites',
+  Offer = '/offer/:id',
+}
+
+export enum AuthorizationStatus {
+  Auth = 'AUTH',
+  NoAuth = 'NO_AUTH',
+  Unknown = 'UNKNOWN',
+}

src/components/main/main.tsx → src/pages/main/main.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable arrow-body-style */
 
 import { CARDS } from '../../data/cardsData';
-import Card from '../card/card';
+import Card from '../../components/card/card';
 
 const Main = () => {
   return (

src/pages/not-found/not-found.module.css

@@ -0,0 +1,34 @@
+.container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: url("markup/img/not-found.jpeg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+.box {
+  background-color: rgba(255, 255, 255, 0.8);
+  text-align: center;
+  padding: 0 30px;
+  border-radius: 16px;
+  box-shadow: 0px 0px 16px 30px rgba(255, 255, 255, 0.8);
+}
+
+.title {
+  font-size: 5rem;
+}
+
+.text {
+  font-size: 2rem;
+}
+
+.link {
+  color: #4481c3;
+}/*# sourceMappingURL=not-found.module.css.map */

src/pages/not-found/not-found.module.sass

@@ -0,0 +1,29 @@
+.container
+  position: fixed
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  display: flex
+  justify-content: center
+  align-items: center
+  background-image: url('markup/img/not-found.jpeg')
+  background-repeat: no-repeat
+  background-size: cover
+  background-position: center
+
+.box
+  background-color: rgba(255, 255, 255, 0.8)
+  text-align: center
+  padding: 0 30px
+  border-radius: 16px
+  box-shadow: 0px 0px 16px 30px rgba(255, 255, 255, 0.8)
+
+.title
+  font-size: 5rem
+
+.text
+  font-size: 2rem
+
+.link
+  color: #4481c3

src/pages/not-found/not-found.tsx

@@ -0,0 +1,18 @@
+import { Link } from 'react-router-dom';
+import styles from './not-found.module.css';
+
+const NotFound = () => (
+  <div className={styles.container}>
+    <div className={styles.box}>
+      <h1 className={styles.title}>404</h1>
+
+      <p className={styles.text}>Страница не найдена</p>
+
+      <Link to="/">
+        <span className={styles.link}>Вернуться на главную</span>
+      </Link>
+    </div>
+  </div>
+);
+
+export default NotFound;