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"

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

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

                </aside>
            </Switch>
            <Switch>
            <content>
                <Route path = "/" component = {MainMag} exact/>
                <Route path = "/catalog/" component={MainCatalog} exact/>
                <Route path = "/catalog/:id" component= {({match}) => <Id name = {match.params.id}/>}/>
                <Route path="/about" component = {About} exact/>
                <Route path = "/post" component = {Post} exact/>
                <Route path = "/contacts" component = {Contacts} />
                {/* <Route component = { NotFound } /> */}

            </content>
            </Switch>

        </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;