网站在反应部署后显示空白页面答案

【问题标题】：website showing blank page after deploy in react网站在反应部署后显示空白页面
【发布时间】：2019-11-20 14:34:44
【问题描述】：

我是 React 的新手，我第一次尝试使用 Github 页面部署我的网站。

我按照所有说明进行操作，完全按照需要完成的操作，但问题是我看到一个空白页...

有人可以帮我解决这个问题吗？

这是我的仓库：https://github.com/lidorb94/instagram-ui

【问题讨论】：

问题似乎是该页面作为项目页面在github上提供，并且您的相关链接已损坏。参照。 create-react-app.dev/docs/… 关于如何为 CRA 指定基本网址

标签： reactjs github deployment github-pages

【解决方案1】：

一个简单的方法是安装gh-pages npm 包。你必须在你的package.json 中设置一个homepage，比如"homepage": "link-to-repo"

然后将脚本添加到您的包中，例如：

"deploy": "gh-pages -d build",

您的脚本应该类似于

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

【讨论】：

是的，我做了所有这些，我的仓库看起来像这样。但我仍然无法让它工作。它显示一个空白页。
你先构建了吗？
什么意思？如果这就是你的意思，我没有运行 npm run build
您需要先运行构建步骤。这就是部署到 gh 页面时将使用的内容

【解决方案2】：

您的路由器中的path='/' 意味着您在字面上匹配/（例如https://lidorb94.github.io/），但实际上，您的项目在https://lidorb94.github.io/instagram-ui/ 上。像这样使用process.env.PUBLIC_URL 作为BrowserRouter 的基本名称道具；

<BrowserRouter basename={process.env.PUBLIC_URL}>
  {/* routes */}
</BrowserRouter>

【讨论】：

它说“第 11:8 行：'BrowserRouter' 未定义 react/jsx-no-undef”
@LidorBatino 你必须先导入它们import { BrowserRouter } from "react-router-dom";

【解决方案3】：

我假设你已经在你的 package.json 文件中添加了以下几行并且 npm run build

"homepage":"https://{Your_Github_Username}.github.io/{repo-name}", //outside dependencies

"scripts": {
    .
    .
    "predeploy":"npm run build",
    "deploy":"gh-pages -d build"
}

如果这不起作用，请检查您的控制台是否发现任何错误。

在控制台中看到错误后，我能够解决问题。在我的情况下，错误在于 https 请求。当我将它更改为“https”时，我在 index.html 中添加了一个带有“http”的脚本链接，它工作得非常好。

发现错误后不要忘记提交并推送更改并再次运行部署...

【讨论】：