Question

我的步骤是： npm运行构建

然后

“主页”：“ https://parthaaaaa.github.io/firstwebapp/”，

“ predeploy”：“ npm run build”，

“部署”：“ gh-pages -d build” 在 package.json 文件

中

然后

npm install --save-dev gh-pages

然后

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

最后，

npm运行部署

但是我的页面空白应用程序在本地主机上运行良好。.

帮助..

Answer 1

您需要将根路径添加到BrowserRouter的基本名称道具中

如果您不使用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页面（https://parthaaaaa.github.io/firstwebapp/）。

还更新到您的home / firstwebapp组件的路由（如果有的话）

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

到

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

通过此更改，当路由路径与“ process.env.PUBLIC_URL”（别名+“ /”）匹配时，它将呈现您的第一个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请求有关。当我将它更改为“ https”时，已在index.html中使用“ http”添加了一个脚本链接，效果很好。

别忘了提交并推送更改，然后再次运行部署。

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”等其他网址，则会显示 404 页错误。

为此，我们需要创建 404.html 来处理此错误并需要在 index.html 中添加一些代码片段

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

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

Answer 6

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

Answer 7

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

"private": true,

把它弄错

"private": false,

这对我有用

在React应用发布在github

7 个答案: