使用 gh-pages 部署的 React App 未加载

Question

我使用 gh-pages 部署了我的 React 应用程序，但它什么也没显示。

Idk 如果原因是我使用的是顺风所以它没有加载样式（但这没有意义，因为我在 index.js 导入了 css 文件）

这是 package.json 的主页：

"homepage": "http://laurabeatris.github.io/react-new-features",

Answer 1

您的存储库中似乎没有包含应用程序的构建版本。 这可能是因为build/目录默认是 gitignored，因为它不是源代码。

您可以通过从.gitignore文件中删除/build行来更改它。 这可能会使您的提交有点奇怪，因为运行构建将显示为代码更改，但至少您的项目应该以这种方式显示。

或者，您可以在创建构建后复制build/目录并将文件夹重命名为未 gitignored 的内容，以便您可以更轻松地控制何时应将新构建添加到源代码管理中。

Answer 2

如果您使用的是 react router dom，则必须将 github pages 存储库名称添加到您的路由中，并使用 basename 属性添加到 BrowserRouter 中，如下所示：

<BrowserRouter basename={'/react-new-features/'}>

Answer 3

如果您使用的是 React Router，那么BrowserRouter现在将无法使用。 您可以改用HashRouter 。

// import { BrowserRouter as Router } from 'react-router-dom';
import { HashRouter as Router } from 'react-router-dom'