SC-3 add react-router

src/app/index.tsx

@@ -1,7 +1,28 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { MainPage } from '../pages/main-page';
+import { LoginPage } from '../pages/login-page';
+import { FavoritesPage } from '../pages/favorites-page';
+import { OfferPage } from '../pages/offer-page';
+import { PrivateRoute } from '../shared/routes/private-route';
+import { Page404 } from '../pages/errors';
 
 const OFFERS_AMOUNT = 555;
 
 export const App = () => (
-	<MainPage offersAmount={OFFERS_AMOUNT} />
+	<BrowserRouter>
+		<Routes>
+			<Route path='/'>
+				<Route index element={<MainPage offersAmount={OFFERS_AMOUNT} />} />
+				<Route path='login' element={<LoginPage />} />
+				<Route path='favorites' element={(
+					<PrivateRoute isAuthenticated={false}>
+						<FavoritesPage />
+					</PrivateRoute>
+				)}
+				/>
+				<Route path='offer/:id' element={<OfferPage />} />
+			</Route>
+			<Route path='*' element={<Page404 />} />
+		</Routes>
+	</BrowserRouter>
 );

src/pages/errors/404/index.tsx

@@ -0,0 +1,18 @@
+import { useNavigate } from 'react-router-dom';
+import styles from './styles.module.css';
+
+export const Page404 = () => {
+	const navigate = useNavigate();
+
+	const handleButtonClick = () => {
+		navigate('/', { replace: true });
+	};
+
+	return (
+		<div className={styles.page}>
+			<h1 className={styles.title}>Page Not Found</h1>
+			<p className={styles.description}>Sorry we find no one page with this path, return to the main page</p>
+			<button className={styles.backButton} onClick={handleButtonClick}>Go to main page</button>
+		</div>
+	);
+};

src/pages/errors/404/styles.module.css

@@ -0,0 +1,27 @@
+.page {
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+/* TODO: подключить normalize.css */
+.title {
+	padding: 0;
+	margin: 0;
+}
+
+.backButton {
+	margin-top: 20px;
+	background-color: #0d0d0d;
+	border: none;
+	color: white;
+	padding: 15px 20px;
+	border-radius: 15px;
+	cursor: pointer;
+}
+
+.backButton:hover {
+	opacity: 0.7;
+}

src/pages/errors/index.ts

@@ -0,0 +1 @@
+export { Page404 } from './404';

src/pages/main-page/index.tsx

@@ -1,4 +1,5 @@
 import { OfferCard } from '../../components';
+import {Link} from 'react-router-dom';
 
 type Props = {
 	offersAmount: number;
@@ -20,12 +21,12 @@ export const MainPage = (props: Props) => {
 						<nav className="header__nav">
 							<ul className="header__nav-list">
 								<li className="header__nav-item user">
-									<a className="header__nav-link header__nav-link--profile" href="#">
+									<Link className="header__nav-link header__nav-link--profile" to='/favorites'>
 										<div className="header__avatar-wrapper user__avatar-wrapper">
 										</div>
 										<span className="header__user-name user__name">[email protected]</span>
 										<span className="header__favorite-count">3</span>
-									</a>
+									</Link>
 								</li>
 								<li className="header__nav-item">
 									<a className="header__nav-link" href="#">