project/shop/src/components/Main.js

import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';
// import createHistory from "history/createBrowserHistory";
import { useState } from 'react';
import {Provider, connect} from 'react-redux';
import {createStore, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import store from "../reducers";
import Catalog from "./catalog";
import {actionCatalogCard, CBasketPage, searchInput, CGoodsCategory, 
    SearchInput, CGoodsSearch, LoginForm, CGoodCard, CYourProfile,
    COrderPage, CUsersList, COrdersList, COrderUpdate, CGoodsList} from "./index";


  
const Main = ({className = "MainImg" }) => {
    return (
        <>

        <div className = {className}>
            <div className = "catalogHead">
                <Switch>
                    <Route path = "/orderPage/" component = {MainCatalog}/>
                <SearchInput/>
                </Switch>
            </div>
                <div className = "catalogInput">

                    <aside>
                        <Switch>
                            <Route path = "/catalog/" component={Catalog} />
                            <Route path = "/search/"component={Catalog} />
                            <Route path = "/good/:id" component={(window.innerWidth > 900) && Catalog} />
                            <Route path = "/orderPage/" component = {Catalog}/>
                        </Switch>
                    </aside>


                <content>
                    <Switch>
                        <Route path = "/" component = {About} exact/>
                        <Route path = "/catalog/" component={MainCatalog} exact/>
                        <Route path = "/catalog/:id" component= {({match}) => <CGoodsCategory id = {match.params.id} /> }/>
                        <Route path = "/search/:name" component = {({match}) => <CGoodsSearch name = {match.params.name}/>}/>
                        <Route path = "/good/:id" component = {({match}) => <CGoodCard id = {match.params.id}/>}/>
                        <Route path = "/order/" component = {COrderPage} exact/>
                        <Route path = "/login/" component = {LoginForm}/>
                        <Route path = "/searchUser/:users" component = {CUsersList}/>
                        <Route path = "/profile/" component = {CYourProfile}/>
                        <Route path = "/user/:_id" component = {CYourProfile}/>
                        <Route path = "/basket" component = {CBasketPage}/>
                        <Route path="/about" component = {About} exact/>
                        <Route path = "/orderPage/" component = {MainCatalog} exact/>
                        <Route path = "/orderPage/:id" component = {({match}) => <CGoodsCategory id = {match.params.id}/>}/>
                        <Route path = "/contacts" component = {Contacts} />
                        <Route path = "/loginError" component={LoginError} />
                        <Route component = { NotFound } exact/>
                    </Switch>
                </content>
            </div>
        </div>
        <div className = "bottom">
                    <Switch>
                        <Route path = "/profile/" component = {COrdersList}/>
                        <Route path = "/user/:_id" component = {COrdersList}/>
                        <Route path = "/orderPage/:_id" component = {COrderUpdate}/>
                    </Switch>
        </div>
        </>
    )
  }

const LoginError = () => { 
    const history = useHistory();
    return(
        <>
        <div className = "loginWrapper">
            <h4>Упс, щось пішло не так. 
                Можливо це ім'я вже зайнято, або ви ввели невірні дані.
                 Спробуйте ще.</h4>
            <button onClick = {() => history.push("/login")}>Перейти на сторінку регістрації</button>
        </div>
        </>
    )}
const MainMag = () => <div>Я тут кароче самый главный страниц</div>
const About = () => 
    <div className = "basketNoGoods">

            <h4>Ласкаво просимо до нашого магазину!</h4>
            <p>
                Серед наших товарів ви знайдете що пожувати, де сховати залишки продуктів, та на чому подивитись кіно.
            </p>
            <p>
                Так, саме так, у нас є техніка та смаколики, бо ми хазяйновиті та любимо смачно поїсти.
            </p>
            <p>
                Щоб зробити замовлення перейдіть до каталогу, або скористуйтеся пошуком.
            </p>

    </div>
const NotFound = () => {
    return(
        <>
            <div className = "basketNoGoods">
                <h4>Упс, сторінку не знайдено, або сталася помилка</h4>
            </div>
        </>
    )
}
{/* <div> <h5 className = "profilePage">Ой, щось пішло не так. Мабудь цієї сторінки немає, або сталася помилка. Спробуйте ще.</h5></div> */}
const MainCatalog = () => <div></div>
const Post = () => <div className = "post">Точно не знаю зачем это, возможно потом уберу. Но в некоторых магазинах есть такое</div>
const Contacts = () => 
    <div className = "order">
        <h4>Як ви нас зможете знайти:</h4>
        <p>Номер телефону: + 38 068 811 3262</p>
        <p>Ми в instagram: <a href = "https://www.instagram.com/alevelua/?hl=ru" target="_blank">alevelua </a> </p>
        <p>Ми у Facebook: <a href = "https://www.facebook.com/alevelukraine" target="_blank"> https://www.facebook.com/alevelukraine </a></p>
        <p>Адреса: пл. Павловская 6, 2й этаж Харьков, Харьковская область, Украина 61022</p>
    </div>
  

export default Main;