几个星期以来，我一直在与这些错误作斗争。主屏幕上的大多数图像都不能加载，它告诉我
404/页面没有找到
而且当我选择一个产品查看详细信息时，产品屏幕显示为空白，我得到了错误
404错误：未找到页面
产品屏幕

import React, { useEffect, useState } from 'react';
import {Link} from 'react-router-dom';
import {useDispatch, useSelector} from 'react-redux';
import {useParams} from 'react-router-dom';
import { detailsProduct } from '../actions/productActions';

function ProductScreen(props) {
    const {id} = useParams()
    console.log(id);

   const [qty, setQty ] = useState(1);
   const productDetails = useSelector(state => state.productDetails);
   const {product, loading, error} = productDetails;
   const dispatch = useDispatch();
   ;
   
   

   useEffect(() => {
    dispatch(detailsProduct (id));
    return () => {
        //
    };
   }, [] )

    const handleAddToCart = () =>{
        props.history.push("/cart/" + id + "?qty=" + qty)
    }
    if (!product)
       return <></>

     return <div>
        <div className='back-to-result'>
            <Link to="/">Back to result</Link>
        </div>
        {loading?  <div> loading...</div>:
        error? <div>{error} </div>:
        (
            <><div className='details'>
                         <div className='details-image'>
                             <img src={product.image} alt={product}></img>
                         </div>
                         <div className='details-info'>
                             <ul>
                                 <li>
                                     <h4>{product.name}</h4>
                                 </li>
                                 <li>
                                     {product.rating} Stars ({product.numReviews} Reviews)
                                 </li>
                                 <li>
                                     Price: <b>{product.price}</b>
                                 </li>
                                 <li>
                                     Description:
                                     <div>
                                         {product.description}
                                     </div>
                                 </li>
                             </ul>
                         </div>
                         <div className='details-action'>
                             <ul>
                                 <li>
                                     Price: {product.price}
                                 </li>
                                 <li>
                                     Status: {product.countInStock > 0 ? "In Stock": "Unavailable"}
                                 </li>
                                 <li>
                                     Qty:<select value={qty} onChange={(e) => {setQty(e.target.value)}}>
                                        {[...Array(product.countInStock).keys()].map(x =>
                                            <option key={x + 1} value={x + 1} ></option>)}
                                     </select>
                                 </li>
                                 <li>
                                    
                                     {product.countInStock > 0 && <button onClick={handleAddToCart} className="button primary">Add to Cart</button> }
                                </li>
                             </ul>
                         </div>
                     </div><div className='details'></div></>
        )
        }
       
         </div>

}
export default ProductScreen;

主屏幕

import React, { useEffect} from 'react';
import {Link} from 'react-router-dom'
import {useDispatch, useSelector} from 'react-redux';    
import { listProducts } from '../actions/productActions';

function HomeScreen(props) {
    const productList = useSelector(state => state.productList);
    const {products, loading, error}  = productList;
    const dispatch = useDispatch();
    useEffect(() => {
       dispatch(listProducts());
        return () => {
            //
        };
    }, [])   

    return loading ? <div>Loading...</div>:
    error ? <div>{error}</div>:
    
     <ul className="products">
   
        {
            products && products.map((product) =>
            
                <li key={product._id}>
                    <div className="product">
                      <Link to={'/product/' + product._id}>
                         <img className="product-image" src={product.image} alt={product}></img>
                      </Link>
                      <div className="product-name">
                       <Link to={'/product/' + product._id}>{product.name}</Link>
                      </div>
                      <div className="product-brand">{product.brand}</div>
                      <div className="product-price">{product.price}</div>
                      <div className="product-rating">{product.rating} Stars ({product.numReviews})</div>
                    </div>
                </li>
                )
        }
    </ul>
}
export default HomeScreen;


server.js

import express from 'express';
import data from './data';

const app = express();

app.get("/api/products/:id", (req, res) => {
    const productId = req.params.id;
    const product = data.products.find(x => x._id === productId);
    if (product)
       res.send(product);
    else
       res.status(404).send ({ msg : "Product Not Found."})  
});

app.get("/api/products", (req, res) => {
    res.send(data.products);
});

app.listen(5000, () => {console.log("Server started at https://localhost:5000") });

package.js

  "name": "frontend",
  "proxy": "http://127.0.0.1:5000",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.2.1",
    "components": "^0.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.4.5",
    "react-scripts": "^2.1.3",
    "redux": "^4.2.0",
    "redux-thunk": "^2.4.2",
    "styled": "^1.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts --openssl-legacy-provider build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

cart.action

import Axios from "axios";
import {CART_ADD_ITEM, CART_REMOVE_ITEM} from "../constants/cartConstants";

const addToCart = (productId, qty) => async (dispatch) =>{

    try {
        const {data} = await Axios.get("/api/products/" + productId);
        dispatch ({
            type: CART_ADD_ITEM, payload: {
                product: data._id,
                name: data.name,
                image: data.image,
                price: data.price,
                countInStock: data.countInStock,
                qty
            }
        });
    } catch (error) {
        
    }
}
const removeFromCart = (productId) => (dispatch) => {
    dispatch({type: CART_REMOVE_ITEM, payload: productId});
}
export { addToCart, removeFromCart }