在 github 中发布 React 应用程序后获取空白页面

Question

我的步骤是： npm 运行构建

然后

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

"predeploy": "npm run build",

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

然后

npm install --save-dev gh-pages

然后

在 Github 存储库中.. 我选择了“gh pages branch.*

最后，

npm 运行部署

但我得到的是空白页应用程序运行在本地主机中正常..

求助..

Answer 1

您需要将根路径添加到 BrowserRouter 的 basename 属性中

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

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

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

process.env.PUBLIC_URL is is a part of the node.js library and is a dynamically generated url that changes based on what development mode you are in, whether you are working on your app locally, or on an actual production server like 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",

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

关于 Building for Relative Paths

的文档

Answer 3

我遇到了同样的问题。在控制台中看到错误后，我能够修复它。在我的例子中，错误是 https 请求。我在 index.html 和 'http' 中添加了一个脚本 link，当我将它更改为 'https' 时，它运行得非常好。

并且不要忘记提交和推送更改并运行再次部署..

Answer 4

我也遇到了同样的问题。我刚看到一个空白页面，但我在浏览器选项卡中看到了 React 徽标和我的站点名称。

为我解决问题的是更改我的 package.json 文件。我最初的“主页”是 http//... 但是当我将它更改为 https// 时它工作正常。

Answer 5

我们需要将 basename 添加到路由器，如下所示，并将其指向存储库名称。

 <Router basename="/test_repository"> //add basename
  <Switch>
    <Route path='/' exact component={Home} />
    <Route path='/about' component={About} />
    <Route path='/services' component={Services} />
    <Route path='/contact-us' component={Contact} />
  </Switch>
 </Router>

另一个问题是，如果您尝试使用“/about”等其他 URL，则会显示 404 页错误。

为此，我们需要创建 404.html 来处理这个错误，并且需要在 index.html

中添加一些代码片段

查看以下文章以获得进一步的解决方案：

deploy-react-app-with-react-router-to-github-pages-blank-404-page-problem-solved

Answer 6

您的主页 url 在 package.json 文件夹中可能有问题。我为解决这个问题所做的是用 github 页面 url 替换 url 并修复它并确保它在顶级 key/value 对中

Answer 7

转到您的 package.json 文件，您可以在其中查看

"private": true,

设为假

"private": false,

这对我有用

Answer 8

Github 页面不会执行任何服务器端代码。您只能上传静态文件（html、css、js、图片等）。

为了拥有托管后端，您应该寻找其他服务，例如 Google Cloud、AWS Lambda、Heroku 等

或者，您可以使用 GitHub 操作在 Github

的 VPS 中部署应用程序

在 github 中发布 React 应用程序后获取空白页面

Getting blank page after react app publish in github

github

github-pages

reactjs

create-react-app