reactjs - 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 有问题吗？一切都在本地工作。我不确定问题可能是什么。

标签： reactjsgithub-pagesreact-dom

Answer 1

无论是在Route path，还是在Router basename其本身，您都应该添加process.env.PUBLIC_URL指向您的地址的指针

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