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

Question

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

我的主页作为 github 页面链接设置在名称下方。

这是我的 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

在Routepath 或Router basename 本身，您应该添加process.env.PUBLIC_URL 作为指向您地址的指针

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