Создал маршрутизацию по приложению

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "1.9.7",
     "axios": "1.5.1",
-    "classnames": "2.3.2",
+    "clsx": "2.1.0",
     "history": "5.3.0",
     "http-status-codes": "2.3.0",
     "leaflet": "1.7.1",

src/components/app.tsx

@@ -1,11 +1,39 @@
 import MainPage from '../pages/main-page';
+import OfferPage from '../pages/offer-page';
+import FavoritePage from '../pages/favorite-page';
+import LoginPage from '../pages/login-page';
+import { Route, Routes } from 'react-router-dom';
+import { AppRoute, authorizationStatus } from '../const';
+import NotFoundPage from '../pages/not-found-page';
+import ProtectedRoute from './protected-route';
 
 type TAppProps = {
   count: number;
 }
 
 export default function App({ count }: TAppProps) {
   return (
-    <MainPage count={count} />
+    <Routes>
+      <Route
+        path={AppRoute.Main}
+        element={<MainPage count={count} />}
+      />
+      <Route
+        path={AppRoute.Offer}
+        element={<OfferPage />}
+      />
+      <Route
+        path={AppRoute.Favorites}
+        element={<ProtectedRoute hasAccess={authorizationStatus.NoAuth}><FavoritePage /></ProtectedRoute>}
+      />
+      <Route
+        path={AppRoute.Login}
+        element={<LoginPage />}
+      />
+      <Route
+        path='*'
+        element={<NotFoundPage />}
+      />
+    </Routes>
   );
 }

src/components/card.tsx

@@ -7,10 +7,10 @@ type TCardProps = {
 export default function Card({ cardClass, cardPremium = false }: TCardProps) {
   return (
     <article className={`${cardClass} place-card`}>
-      {cardPremium ?
+      {cardPremium &&
         <div className="place-card__mark">
           <span>Premium</span>
-        </div> : ''}
+        </div>}
 
       <div className="cities__image-wrapper place-card__image-wrapper">
         <a href="#">

src/components/container.tsx

@@ -1,18 +1,19 @@
 import { ReactNode } from 'react';
 import Header from './header';
+import clsx from 'clsx';
 
 type TContainerProps = {
   children: ReactNode;
   pageClass?: string;
-  mainClass?: string;
+  mainClass: string;
   navigation?: boolean;
 }
 
 export default function Container({ children, pageClass, mainClass, navigation }: TContainerProps) {
   return (
-    <div className={`page ${pageClass ? pageClass : ''}`}>
+    <div className={clsx('page', pageClass && pageClass)}>
       <Header navigation />
-      <main className={`page__main page__main--${mainClass ? mainClass : ''}`}>
+      <main className={clsx('page__main page__main--', mainClass && mainClass)}>
         {children}
       </main>
     </div>

src/components/header.tsx

@@ -1,3 +1,6 @@
+import { Link } from 'react-router-dom';
+import { AppRoute } from '../const';
+
 type THeaderProps = {
   navigation: boolean;
 }
@@ -8,9 +11,9 @@ export default function Header({ navigation }: THeaderProps) {
       <div className="container">
         <div className="header__wrapper">
           <div className="header__left">
-            <a className="header__logo-link header__logo-link--active">
+            <Link to={AppRoute.Main} 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>
+            </Link>
           </div>
           {navigation ?
             (

src/components/protected-route.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+import { AppRoute } from '../const';
+
+type TProtectedRouteProps = {
+  children: ReactNode;
+  hasAccess: boolean;
+}
+
+export default function ProtectedRoute({ hasAccess, children }: TProtectedRouteProps) {
+  if (hasAccess) {
+    return children;
+  }
+
+  return <Navigate to={AppRoute.Login} />;
+}
+

src/components/rating.tsx

@@ -10,8 +10,10 @@ export default function Rating({ ratingClass, isRatingValue }: TRating) {
         <span style={{ width: '80%' }}></span>
         <span className="visually-hidden">Rating</span>
       </div>
-      {isRatingValue ?
-        <span className="offer__rating-value rating__value">4.8</span> : ''}
+      {isRatingValue &&
+        <span className="offer__rating-value rating__value">4.8</span>}
     </div>
+
+
   );
 }

src/const.ts

@@ -0,0 +1,12 @@
+export enum AppRoute {
+  Login = '/login',
+  Main = '/',
+  Favorites = '/favorites',
+  Offer = '/offer',
+}
+
+export const authorizationStatus = {
+  Auth: true,
+  NoAuth: false,
+};
+

src/index.tsx

@@ -1,13 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './components/app';
+import { BrowserRouter } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 
 root.render(
   <React.StrictMode>
-    <App count={5} />
+    <HelmetProvider>
+      <BrowserRouter>
+        <App count={5} />
+      </BrowserRouter>
+    </HelmetProvider>
   </React.StrictMode>
 );

src/pages/main-page.tsx

@@ -66,7 +66,7 @@ export default function MainPage({ count }: TMainPageProps) {
               </ul>
             </form>
             <div className="cities__places-list places__list tabs__content">
-              <Card cardClass='cities__card' />
+              <Card cardClass='cities__card' cardPremium />
               <Card cardClass='cities__card' />
               <Card cardClass='cities__card' />
               <Card cardClass='cities__card' />

src/pages/not-found-page.tsx

@@ -0,0 +1,20 @@
+import { Link } from 'react-router-dom';
+import { AppRoute } from '../const';
+
+const divStyle = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  textAlign: 'center'
+};
+
+export default function NotFoundPage() {
+  return (
+    <div style={divStyle}>
+      <h1>404 Not Found</h1>
+      <Link to={AppRoute.Main}>
+        <p>На глваную страницу</p>
+      </Link>
+    </div>
+  );
+}