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

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

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

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

1 个答案: