github 页面上的 React 应用程序部署显示空白页面

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分支已经创建，部署也已经创建；但页面是空白的，控制台上没有显示任何内容。我检查了开发工具中的源代码，所有文件都在那里。

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

我也查看了这个，但是 none 那里的答案似乎帮我解决了这个问题。

这是github repo and the deployment link

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 doesn’t support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42, where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:

You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Read more about different history implementations in React Router.

因此，如果您想在 GitHub 个页面上托管您的站点，则应使用 hashHistory。这是文档的 link。

如果您不想更改路由器，请尝试在 Netlify which is also another free hosting provider. But again for Netlify deployment, follow the documentation 上部署它，上面写着：

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

/*  /index.html  200

github 页面上的 React 应用程序部署显示空白页面

React app deployment on github pages shows a blank page

github

npm

github-pages

reactjs