mainContent меняется, хедер футер - на всех остается + ссылки
This commit is contained in:
parent
1fa59f04ef
commit
b414c0e8ab
30
src/App.tsx
30
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>
|
||||
<IonRouterOutlet>
|
||||
<Switch>
|
||||
<Route path="/home" component={ Home } exact />
|
||||
<Redirect exact from="/" to="/home" />
|
||||
</Switch>
|
||||
</IonRouterOutlet>
|
||||
|
||||
{/* Постоянный 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>
|
||||
<AppRoutes />
|
||||
</IonRouterOutlet>
|
||||
</div>
|
||||
|
||||
{/* Постоянный Footer */}
|
||||
<Footer />
|
||||
|
||||
</div>
|
||||
</IonReactRouter>
|
||||
</IonApp>
|
||||
);
|
||||
|
@ -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;
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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'>
|
||||
<Header />
|
||||
<MainContent />
|
||||
<Footer />
|
||||
</div>
|
||||
<p className="pt-20">Домашняя страница</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -1,11 +1,13 @@
|
||||
|
||||
function Login() {
|
||||
return (
|
||||
<div className=''>
|
||||
<h1>Зарегистрироваться</h1>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
function Auth() {
|
||||
return (
|
||||
<div className='pt-20'>
|
||||
|
||||
<h1 className='cursor-pointer'>Страница регистрации</h1>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Login;
|
||||
export default Auth;
|
Loading…
x
Reference in New Issue
Block a user