Question

我将我的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"
  }
}

gh页面部署与React应用程序

0 个答案: