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

src/components/App.tsx

@@ -1,11 +1,38 @@
-import {MainScreen} from './pages/MainScreen';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
+import MainScreen from './pages/MainScreen';
+import Login from './pages/Login';
+import Favorites from './pages/Favorites';
+import Offer from './pages/Offer';
+import NotFound from './NotFound';
+import AppRoute, { AuthorizationStatus } from '../const';
+import PrivateRoute from './private-route';
 
 type AppScreenProps = {
   placesCount: number;
 }
 function App({placesCount}: AppScreenProps){
   return (
-    <MainScreen placesCount={placesCount}/>
+    <HelmetProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path ={AppRoute.Root} element = {<MainScreen placesCount={placesCount} />} />
+          <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>
+    </HelmetProvider>
   );
 }
 export default App;

src/components/Logo.tsx

@@ -0,0 +1,17 @@
+import { Link } from 'react-router-dom';
+
+function Logo(){
+  return(
+    <Link className="header__logo-link header__logo-link--active" to={'/'}>
+      <img
+        className="header__logo"
+        src="img/logo.svg"
+        alt="6 cities logo"
+        width={81}
+        height={41}
+      />
+    </Link>
+  );
+}
+
+export default Logo;

src/components/NotFound.tsx

@@ -0,0 +1,12 @@
+import { Link } from 'react-router-dom';
+
+function NotFound() {
+  return (
+    <div>
+      <h1>404 Not Found</h1>
+      <Link to="/">Go to Home Page</Link>
+    </div>
+  );
+}
+
+export default NotFound;

src/components/pages/Favorites.tsx

@@ -1,19 +1,16 @@
+import Logo from '../Logo';
+import { Helmet } from 'react-helmet-async';
 function Favorites(){
   return (
     <div className="page">
+      <Helmet>
+        <title>Избранное</title>
+      </Helmet>
       <header className="header">
         <div className="container">
           <div className="header__wrapper">
             <div className="header__left">
-              <a className="header__logo-link" href="main.html">
-                <img
-                  className="header__logo"
-                  src="img/logo.svg"
-                  alt="6 cities logo"
-                  width={81}
-                  height={41}
-                />
-              </a>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">

src/components/pages/FavoritesEmpty.tsx

@@ -1,19 +1,13 @@
+import Logo from '../Logo';
+
 function FavoritesEmpty(){
   return (
     <div className="page page--favorites-empty">
       <header className="header">
         <div className="container">
           <div className="header__wrapper">
             <div className="header__left">
-              <a className="header__logo-link" href="main.html">
-                <img
-                  className="header__logo"
-                  src="img/logo.svg"
-                  alt="6 cities logo"
-                  width={81}
-                  height={41}
-                />
-              </a>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">

src/components/pages/Login.tsx

@@ -1,19 +1,17 @@
+import Logo from '../Logo';
+import { Helmet } from 'react-helmet-async';
+
 function Login(){
   return (
     < div className="page page--gray page--login">
+      <Helmet>
+        <title>Авторизация</title>
+      </Helmet>
       <header className="header">
         <div className="container">
           <div className="header__wrapper">
             <div className="header__left">
-              <a className="header__logo-link" href="main.html">
-                <img
-                  className="header__logo"
-                  src="img/logo.svg"
-                  alt="6 cities logo"
-                  width={81}
-                  height={41}
-                />
-              </a>
+              <Logo/>
             </div>
           </div>
         </div>

src/components/pages/MainEmpty.tsx

@@ -1,19 +1,13 @@
+import Logo from '../Logo';
+
 function MainEmpty(){
   return (
     <div className="page page--gray page--main">
       <header className="header">
         <div className="container">
           <div className="header__wrapper">
             <div className="header__left">
-              <a className="header__logo-link header__logo-link--active">
-                <img
-                  className="header__logo"
-                  src="img/logo.svg"
-                  alt="6 cities logo"
-                  width={81}
-                  height={41}
-                />
-              </a>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">

src/components/pages/MainScreen.tsx

@@ -1,23 +1,22 @@
 import Card from './Card';
+import Logo from '../Logo';
+import { Helmet } from 'react-helmet-async';
+
 type MainScreenProps = {
     placesCount: number;
 }
-export function MainScreen({placesCount}: MainScreenProps){
+
+function MainScreen({placesCount}: MainScreenProps){
   return (
     <div className="page page--gray page--main">
+      <Helmet>
+        <title>6 Городов</title>
+      </Helmet>
       <header className="header">
         <div className="container">
           <div className="header__wrapper">
             <div className="header__left">
-              <a className="header__logo-link header__logo-link--active">
-                <img
-                  className="header__logo"
-                  src="img/logo.svg"
-                  alt="6 cities logo"
-                  width={81}
-                  height={41}
-                />
-              </a>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">

src/components/pages/Offer.tsx

@@ -1,19 +1,16 @@
+import Logo from '../Logo';
+import { Helmet } from 'react-helmet-async';
 function Offer(){
   return (
     <div className="page">
+      <Helmet>
+        <title>Предложение</title>
+      </Helmet>
       <header className="header">
         <div className="container">
           <div className="header__wrapper">
             <div className="header__left">
-              <a className="header__logo-link" href="main.html">
-                <img
-                  className="header__logo"
-                  src="img/logo.svg"
-                  alt="6 cities logo"
-                  width={81}
-                  height={41}
-                />
-              </a>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">

src/components/pages/OfferNotLogged.tsx

@@ -1,19 +1,12 @@
+import Logo from '../Logo';
 function OfferNotLogged(){
   return (
     <div className="page">
       <header className="header">
         <div className="container">
           <div className="header__wrapper">
             <div className="header__left">
-              <a className="header__logo-link" href="main.html">
-                <img
-                  className="header__logo"
-                  src="img/logo.svg"
-                  alt="6 cities logo"
-                  width={81}
-                  height={41}
-                />
-              </a>
+              <Logo/>
             </div>
             <nav className="header__nav">
               <ul className="header__nav-list">

src/components/private-route.tsx

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

src/const.ts

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