project/shop/src/components/Main.js

import {BrowserRouter as Router, Route, Link, Switch, Redirect} 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, YourProfile} from "./index";


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

        <div className = {className}>
            <div className = "catalogHead">
                <SearchInput/>
            </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} />
                        </Switch>
                    </aside>


                <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 = "/good/:id" component = {({match}) => <CGoodCard id = {match.params.id}/>}/>
                        <Route path = "/login" component = {LoginForm}/>
                        <Route path = "/profile/:login" component = {YourProfile}/>
                        <Route path = "/basket" component = {CBasketPage}/>
                        <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;