在github中发布反应应用程序后获得空白页面

Question

我的步骤是： npm run build

然后

"主页": " https://parthaaaaa.github.io/firstwebapp/ ",

"predeploy": "npm run build",

"deploy": package.json文件中的"gh-pages -d build"

然后

npm install --save-dev gh-pages

然后

在 Github 存储库中.. 我选择了“gh pages 分支。*

最后，

npm 运行部署

但我得到一个空白页应用程序在本地主机上运行良好..

帮助..

Answer 1

您需要将根路径添加到 BrowserRouter 的 basename prop

如果您没有使用 BrowserRouter，请添加以下内容

import BrowserRouter from 'react-router-dom/BrowserRouter'

ReactDOM.render((
   <BrowserRouter basename={process.env.PUBLIC_URL}>
     <App />
   </BrowserRouter>
), ...)  

process.env.PUBLIC_URL 是 node.js 库的一部分，是一个动态生成的 url，它会根据您所处的开发模式，无论您是在本地处理应用程序，还是在实际的生产服务器（如 GitHub pages）上进行更改（https://parthaaaaa.github.io/firstwebapp/）。

同时更新你的 home/firstwebapp 组件的路由（如果有的话）

 <Route exact path='/firstwebapp' render= ... />} />

到

 <Route exact path='/' render= ... />} />

通过此更改，当路由路径与“process.env.PUBLIC_URL”（reponame + '/'）匹配时，它将呈现您的第一个 webapp 组件

Answer 2

在你的 package.json 中homepage是不正确的，所以它搞砸了构建。改变

  "homepage": "https:Parthaaaaa.github.io/firstwebapp",

到

  "homepage": "https://parthaaaaa.github.io/firstwebapp",

然后再次尝试构建和部署。

有关构建相对路径的文档

Answer 3

转到package.json您可以看到的文件

"private": true,

让它变成假的

"private": false,

这对我来说是工作