gh页面部署与React应用程序

如何解决gh页面部署与React应用程序

我将我的React Shopping Cart应用程序部署到了gh页，但是CSS已更改，并且某些组件未在应用程序中呈现。当上传到gh页时，只有首页加载时没有任何原始CSS，并且“立即购买”按钮甚至没有呈现。当我转到“商店”部分链接时，整个商店组件均未呈现，但在本地呈现。一直在试图找出答案，但是我尝试过的解决方案都没有奏效。

这是我的index.js的快照

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,document.getElementById('root')
);

App.js

import React,{useState } from 'react';
import { HashRouter as Router,Switch,Route } from 'react-router-dom';
import Nav from './Nav';
import Home from './components/Home';
import Shop from './components/Shop';
import Products from './products.json';
import './styles/reset.css';
import './styles/main.css';

const App = () => {
    const [products,setProducts] = useState(Products)

    const updateProducts = (product,n) => {
        setProducts([...products].map(object => {
            if(object.id === product && (object.amount + n >= 0)) {
                return {
                    ...object,amount: object.amount + n
                }
            }
            else return object;
        }))
    }

    return (
        <div className="app">
            <Router basename ={process.env.PUBLIC_URL}>
                    <Nav />
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route exact path="/shop" 
                            render={props => <Shop {...props} 
                            products={products}
                            updateProducts={updateProducts}
                            />} />
                    </Switch>
            </Router>

        </div>
        
    )
}

export default App

Package.json

{
  "name": "shopping-cart","version": "0.1.0","private": true,"homepage": "http://rueeazy.github.io/shopping-cart","dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.31","@fortawesome/free-solid-svg-icons": "^5.15.0","@fortawesome/react-fontawesome": "^0.1.11","@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.3.2","@testing-library/user-event": "^7.1.2","react": "^16.13.1","react-dom": "^16.13.1","react-router-dom": "^5.2.0","react-scripts": "3.4.3"
  },"scripts": {
    "start": "react-scripts start","predeploy": "npm run build","deploy": "gh-pages -d build","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"
  },"eslintConfig": {
    "extends": "react-app"
  },"browserslist": {
    "production": [
      ">0.2%","not dead","not op_mini all"
    ],"development": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ]
  },"devDependencies": {
    "gh-pages": "^3.1.0"
  }
}