project/shop/src/components/MainImg.js

import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
import createHistory from "history/createBrowserHistory";
import {actionCatalogCard} from "./index"
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 {searchInput, CGoodsCategory, SearchInput, CGoodsSearch} from "./index";
// //import {Goods} from "./index";
// import  from "./goodsCategory";
// import  from './searchInput';
// import  from './goodsSearch';

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

        <div className = {className}>
            <div className = "catalogHead">
                <SearchInput/>
            </div>
                <div className = "catalogInput">
                    <Switch>
                        <aside>

                            <Route path = "/catalog/" component={Catalog} />
                            <Route path = "/search/"component={Catalog} />
                        </aside>
                    </Switch>

                <content>
                    <Switch>
                        <Route path = "/" component = {MainMag} 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="/about" component = {About} exact/>
                        <Route path = "/post" component = {Post} exact/>
                        <Route path = "/contacts" component = {Contacts} />
                        <Route component = { NotFound } exact/>
                    </Switch>
                </content>
            </div>
        </div>
        </>
    )
  }
//   const Id = ({name = "Idishnic"} )=> {
//    return(<div>{name}</div>) }
  const MainMag = () => <div>Я тут кароче самый главный страниц</div>
  const About = () => <div>Мы крутой магазин, бла-бла</div>
  const NotFound = () => <div>Да пошел ты!</div>
  const MainCatalog = () => <div>Chose</div>
  const Post = () => <div className = "post">Точно не знаю зачем это, возможно потом уберу. Но в некоторых магазинах есть такое</div>
  const Contacts = () => <div className = "contacts">Тут будет адрес, номер телефона и соцсети</div>
  

export default Main;