mainContent меняется, хедер футер - на всех остается + ссылки

src/App.tsx

@@ -1,24 +1,36 @@
 import React from 'react';
 import { IonApp, IonRouterOutlet } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-import { Switch, Route, Redirect } from 'react-router-dom';
-
-import Home from './pages/Home';
 
+import AppRoutes from './AppRoutes';
 
 import './index.css'
 import '@ionic/react/css/core.css';
 
+import Header from './components/Header';
+import Footer from './components/Footer';
 
 const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
+
+      {/* Постоянный Header */}
+      <Header />
+
+      {/* Основной контейнер для контента */}
+      <div className='flex flex-col min-h-screen container mx-auto px-4 bg-fuchsia-200'>
+
+
+        <div className='container mt-20 flex-1'>
           <IonRouterOutlet>
-        <Switch>
+            <AppRoutes />
-          <Route path="/home" component={ Home } exact />
-          <Redirect exact from="/" to="/home" />
-        </Switch>
           </IonRouterOutlet>
+        </div>
+
+        {/* Постоянный Footer */}
+        <Footer />
+
+      </div>
     </IonReactRouter>
   </IonApp>
 );

src/AppRoutes.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+
+import Home from './pages/Home';
+import Login from './pages/Login';
+import Register from './pages/Register';
+
+const AppRoutes = () => (
+  <>
+    <Route path="/home" component={Home} exact />
+    <Route path="/register" component={Register} />
+    <Route path="/login" component={Login} />
+  </>
+);
+
+export default AppRoutes;

src/components/Header.tsx

@@ -1,9 +1,13 @@
-
+import React from 'react';
+import { IonRouterLink } from '@ionic/react';
 
 function Header() {
     return (
-        <div className='fixed top-0 left-0 w-full z-50 bg-fuchsia-400 shadow h-12 px-4'>
+        <div className='fixed top-0 left-0 w-full z-50 bg-fuchsia-400 shadow h-12 px-4 flex justify-between'>
             <h1>Вмеда</h1>
+            <IonRouterLink href="/register">
+                <a className="text-sm">Зарегистрироваться</a>
+            </IonRouterLink>
         </div>
     );
 }

src/pages/Home.tsx

@@ -1,16 +1,8 @@
 
-import Header from '../components/Header';
-import Footer from '../components/Footer';
-import MainContent from '../components/MainContent';
-
 function Home() {
     return (
         <>
-            <div className='flex flex-col min-h-screen container mx-auto px-4 bg-fuchsia-200'>
+          <p className="pt-20">Домашняя страница</p>
-                <Header />
-                <MainContent /> 
-                <Footer />
-            </div>
         </>
     );
 }

src/pages/Register.tsx

@@ -1,11 +1,13 @@
 
-function Login() {
+
+function Auth() {
   return (
-        <div className=''>
+    <div className='pt-20'>
-            <h1>Зарегистрироваться</h1>
+
+        <h1 className='cursor-pointer'>Страница регистрации</h1>
 
     </div>
   );
 }
 
-export default Login;
+export default Auth;