React 应用仅在部署到 github 页面时显示背景颜色

Question

我向 github 页面部署了一个 React 应用程序，但它只显示我的背景颜色和 none 实际组件。我按照本指南 (https://create-react-app.dev/docs/deployment/#github-pages) 运行终端命令并在我的 json 文件中插入正确的代码。我在部署时没有收到任何错误，当我检查页面的控制台时也没有显示任何错误。

我的主页 github 页面 link 设置在名称的正下方。

这是我 package.json

中的脚本

  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

这是我的 app.js

import React from 'react';
import Navbar from './components/Navbar';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import './App.css';
import Home from './components/pages/Home';

function App() {
  return (
    <React.Fragment>
      <Router>

        <Switch>
          <Route path='/' exact component = {Home} />
        </Switch>
      </Router>
    </React.Fragment>
  );
}

export default App;

我的 ReactDOM 有问题吗？一切都在本地工作。我不确定是什么问题。

Answer 1

要么在 Route path，要么在 Router basename 本身，您应该添加 process.env.PUBLIC_URL 作为指向您地址的指针

  <Router basename={process.env.PUBLIC_URL}>

React 应用仅在部署到 github 页面时显示背景颜色

React app only displays the background color when deployed to github pages

github-pages

reactjs

react-dom