add routes

package.json

@@ -15,6 +15,7 @@
     "modern-normalize": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.16.0",
     "redux": "^4.2.1",

src/App.jsx

@@ -1,11 +1,26 @@
+import { Route, Routes } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
+import { lazy } from 'react';
+
+const MainPage = lazy(() => import('./pages/MainPage/MainPage'));
+const FavouritePage = lazy(() => import('./pages/FavouritePage/FavouritePage'));
+const SerchPage = lazy(() => import('./pages/SerchPage/SerchPage'));
+const NotFound = lazy(() => import('./pages/NotFound/NotFound'));
 import './App.css';
+import { SharedLayout } from './components/SharedLayout/SharedLayout';
 
 function App() {
   return (
-    <>
-      <h1>hello hello</h1>
-      <h2>some text</h2>
-    </>
+    <HelmetProvider>
+      <Routes>
+        <Route path="/" element={<SharedLayout />}>
+          <Route index element={<MainPage />} />
+          <Route path="serch/*" element={<SerchPage />} />
+          <Route path="favourite" element={<FavouritePage />} />
+          <Route path="*" element={<NotFound />} />
+        </Route>
+      </Routes>
+    </HelmetProvider>
   );
 }
 

src/components/Loader/Loader.jsx

@@ -0,0 +1,7 @@
+export const Loader = () => {
+  return (
+    <>
+      <p>...loading</p>
+    </>
+  );
+};

src/components/SharedLayout/SharedLayout.jsx

@@ -0,0 +1,17 @@
+import { Outlet } from 'react-router-dom';
+import { Suspense } from 'react';
+// import { Loader } from '../Loader/Loader';
+
+export const SharedLayout = () => {
+  return (
+    <div>
+      <div>page header</div>
+      <main>
+        <Suspense fallback={<div>Loading...</div>}>
+          <Outlet />
+        </Suspense>
+      </main>
+      <div>page footer</div>
+    </div>
+  );
+};

src/components/SharedLayout/SharedLayout.styled.jsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+export const MainLayoutContainer = styled.div`
+  display: flex;
+
+  /* min-height: 100vh; */
+`;
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  height: 100%;
+
+  @media screen and (min-width: 1440px) {
+    width: calc(100% - 289px);
+  }
+`;

src/pages/FavouritePage/FavouritePage.jsx

@@ -0,0 +1,7 @@
+export default function FavouritePage() {
+  return (
+    <>
+      <h1>FavouritePage</h1>
+    </>
+  );
+}

src/pages/MainPage/MainPage.jsx

@@ -0,0 +1,7 @@
+export default function MainPage() {
+  return (
+    <>
+      <h1>Main page</h1>
+    </>
+  );
+}

src/pages/NotFound/NotFound.jsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <>
+      <h1>NotFound</h1>
+    </>
+  );
+}

src/pages/SerchPage/SerchPage.jsx

@@ -0,0 +1,7 @@
+export default function SerchPage() {
+  return (
+    <>
+      <h1>SerchPage</h1>
+    </>
+  );
+}