history push by window width

shop/src/App.css

@@ -74,6 +74,7 @@ button:disabled {
   display: none;
 }
 
+ 
 
 .rightSide {
   height: 100%;
@@ -186,6 +187,7 @@ content {
 .goodCard {
   display: flex;
   flex-direction: column;
+  margin: 5px;
   /* width: 70%; */
   padding: 35px;
   align-items: center;
@@ -288,7 +290,9 @@ button {
     font-size: 10px;
   }
   
-
+.catalogInput {
+  justify-content: flex-start;
+}
   .catalog a {
     font-size: 10px;
   }
@@ -303,7 +307,7 @@ button {
 } */
 
   .MainImg content {
-    width: 60%;
+    width: 100%;
   }
   .goods {
     padding: 0%;
@@ -327,11 +331,14 @@ button {
     line-height: 25px;
   }
   .goodCard {
-    width: 200px;
+    margin: 5px;
+    position: absolute;
+    left: 0;
+    right: 0;
     padding: 10px;
   }
   .goodCard img{
-    width: 100px;
+    width: 250px;
   }
   .goodCard h2 {
     font-size: 14px;

shop/src/components/MainImg.js

@@ -28,7 +28,7 @@ const Main = ({className = "MainImg" }) => {
                         <Switch>
                             <Route path = "/catalog/" component={Catalog} />
                             <Route path = "/search/"component={Catalog} />
-                            {/* <Route path = "/good/:id" component={Catalog} /> */}
+                            <Route path = "/good/:id" component={(window.innerWidth > 900) && Catalog} />
                         </Switch>
                     </aside>
 

shop/src/components/goodCard.js

@@ -1,7 +1,8 @@
 import { connect } from "react-redux";
 import {gql, urlUpload, actionPromise} from "../reducers";
 import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';
 
 
 
@@ -50,8 +51,32 @@ const actionGoodCard = (_id) => {
 
 
   const GoodCard = ({id, goodCard = null, getData, className = "goodCard"}) => {
-    useEffect(() =>  getData(id), [id])
-    console.log(goodCard)
+    const history = useHistory();
+    useEffect(() =>  getData(id), [id]);
+
+
+
+    const [width, setWidth] = useState(window.innerWidth);
+    const [startWidth, setStartwidth] = useState(true);
+    const [finallyWidth, setFinallyWidth] = useState(true);
+
+    useEffect(() => startWidth !== finallyWidth &&    window.location.reload(), [startWidth, finallyWidth])
+
+
+    window.onresize = () => {
+
+      width > 900 ? setStartwidth(true) : setStartwidth(false);
+
+      setWidth(window.innerWidth);
+
+      width > 900 ? setFinallyWidth(true) : setFinallyWidth(false);
+
+      // startWidth !== finallyWidth &&  history.push("./catalog")
+
+
+      }
+
+
      return(
         <> 
         { goodCard &&