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

constants.tsx

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

src/components/app/app.tsx

@@ -1,12 +1,42 @@
 import MainScreen from '../../pages/main';
+import {BrowserRouter, Route, Routes} from 'react-router-dom';
+import NotFound from '../../pages/not_found';
+import Login from '../../pages/login';
+import Offer from '../../pages/offer';
+import {AppRoute, AuthorizationStatus} from '../../../constants';
+import PrivateRoute from '../private-route/private-route';
+import Favorites from '../../pages/favorites';
 
 type AppScreenPros = {
   offersAmount: number;
 }
 
 function App({offersAmount}: AppScreenPros): JSX.Element {
   return (
-    <MainScreen offersAmount={offersAmount}/>
+    <BrowserRouter>
+      <Routes>
+        <Route
+          path={AppRoute.Root}
+          element={<MainScreen offersAmount={offersAmount} /> }
+        />
+        <Route
+          path={AppRoute.Login}
+          element={<Login />}
+        />
+        <Route
+          path={AppRoute.Favorites}
+          element={<PrivateRoute authorizationStatus={AuthorizationStatus.NoAuth}><Favorites /></PrivateRoute> }
+        />
+        <Route
+          path={AppRoute.OfferWithId}
+          element={<Offer />}
+        />
+        <Route
+          path={'*'}
+          element={<NotFound />}
+        />
+      </Routes>
+    </BrowserRouter>
   );
 }
 

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

@@ -0,0 +1,15 @@
+import {Navigate} from 'react-router-dom';
+import {AppRoute, AuthorizationStatus} from '../../../constants';
+
+type PrivateRouteProps = {
+  authorizationStatus: AuthorizationStatus;
+  children: JSX.Element;
+}
+
+function PrivateRoute({authorizationStatus, children}: PrivateRouteProps): JSX.Element {
+  return (
+    authorizationStatus === AuthorizationStatus.Auth ? children : <Navigate to={AppRoute.Login} />
+  );
+}
+
+export default PrivateRoute;

src/index.tsx

@@ -10,7 +10,6 @@ const offersAmount = 312;
 
 root.render(
   <React.StrictMode>
-    <h1>Hello, World!</h1>
     <App offersAmount={offersAmount} />
   </React.StrictMode>
 );

src/pages/main.tsx

@@ -118,17 +118,17 @@ function MainScreen({offersAmount}: MainScreenPros): JSX.Element {
               <b className="places__found">{offersAmount} places to stay in Amsterdam</b>
               <form className="places__sorting" action="#" method="get">
                 <span className="places__sorting-caption">Sort by</span>
-                <span className="places__sorting-type" tabIndex="0">
+                <span className="places__sorting-type" tabIndex={0}>
                   Popular
                   <svg className="places__sorting-arrow" width="7" height="4">
                     <use xlinkHref="#icon-arrow-select"></use>
                   </svg>
                 </span>
                 <ul className="places__options places__options--custom places__options--opened">
-                  <li className="places__option places__option--active" tabIndex="0">Popular</li>
-                  <li className="places__option" tabIndex="0">Price: low to high</li>
-                  <li className="places__option" tabIndex="0">Price: high to low</li>
-                  <li className="places__option" tabIndex="0">Top rated first</li>
+                  <li className="places__option places__option--active" tabIndex={0}>Popular</li>
+                  <li className="places__option" tabIndex={0}>Price: low to high</li>
+                  <li className="places__option" tabIndex={0}>Price: high to low</li>
+                  <li className="places__option" tabIndex={0}>Top rated first</li>
                 </ul>
               </form>
               <div className="cities__places-list places__list tabs__content">

src/pages/not_found.tsx

@@ -0,0 +1,14 @@
+import {Link} from 'react-router-dom';
+import {Fragment} from 'react';
+
+
+function NotFound(): JSX.Element {
+  return (
+    <Fragment>
+      <h1>404 Not Found</h1>
+      <Link to={'/'}>Go to main page</Link>
+    </Fragment>
+  );
+}
+
+export default NotFound;