Question

我刚刚开始使用 react 并构建了我的第一个应用程序，现在我正在尝试将它部署到 github 页面上，但该页面完全空白。我遵循的步骤是：

安装 gh-pages：npm install gh-pages --save
将主页添加到 package.json： "homepage": "https://milind452.github.io/my-reads/"
添加脚本："predeploy": "npm run build", "deploy": "gh-pages -d build"
部署：npm run deploy

可以看到创建了gh-pages分支，也创建了一个deployment；但页面是空白的，控制台上没有任何显示。我检查了开发工具中的来源，所有文件都在那里。

我还检查了我的 repo pages 设置，部署源设置为 gh-pages 分支。我不确定发生了什么。

我也查看了这个 stackoverflow question，但似乎没有一个答案能帮我解决这个问题。

Answer 1

切勿在 GitHub 页面上使用 BrowserRouter。它有一些问题，它总是显示空白屏幕。改用 HashRouter，这很可能会奏效。

import { HashRouter } from "react-router-dom";

// some code here

return (
    <HashRouter base="/">
        <App />
    </HashRouter>
)

Answer 2

create react app 文档说：

<块引用>

GitHub Pages 不支持使用 HTML5 pushState 引擎盖下的历史 API（例如，React Router 使用 browserHistory）。这是因为当有一个新的页面加载时 url 像 http://user.github.io/todomvc/todos/42，其中 /todos/42 是一个前端路由，GitHub Pages 服务器返回 404 因为它知道没有任何/todos/42。如果要将路由器添加到托管的项目在 GitHub Pages 上，这里有几个解决方案：

您可以从使用 HTML5 历史 API 切换到使用哈希路由。如果你使用 React Router，你可以切换到 hashHistory 来实现这个效果，但是 URL 会更长更冗长（例如，http://user.github.io/todomvc/#/todos/42?_k=yknaj）。 Read more 关于 React Router 中不同的历史实现。

因此，如果您想在 GitHub Pages 上托管您的网站，您应该使用 hashHistory。这是文档的 link。

如果您不想更换路由器，请尝试将其部署在 Netlify 上，这也是另一家免费托管服务提供商。但同样对于 Netlify 部署，请遵循 documentation，它说：

要支持 pushState，请确保使用以下重写规则创建 public/_redirects 文件：

/*  /index.html  200

github 页面上的 React 应用部署显示一个空白页面

2 个答案: