简体   繁体   English

Github 页面和 React 应用程序无论使用何种方法都无法正常工作

[英]Github Pages and React App not working regardless of methods

I've been trying to add my React App project to Github Pages for a week.一周以来,我一直在尝试将我的 React App 项目添加到 Github Pages。 After all the prep work and everything that need to be done, I finally got it to show up, well kinda.在所有的准备工作和所有需要完成的工作之后,我终于让它出现了,好吧。 It actually doesn't show anything, nor does it give me errors.它实际上没有显示任何内容,也没有给我错误。 Which leads me to believe that my script这让我相信我的剧本

<script src="../dist/bundle.js"></script>

is the culprit.是罪魁祸首。 However, the problem is I've never once used bundle.js.但是,问题是我从未使用过 bundle.js。 I wanted to learn how to use React without using create-react-app, and in doing so I seem to have gotten to far along in the game I'm not even sure how this is supposed to work.我想学习如何在不使用 create-react-app 的情况下使用 React,这样做我似乎已经在游戏中走得很远,我什至不确定这应该如何工作。

Here is the Github Pages in it's current form这是当前形式的 Github 页面

https://kevin6767.github.io/redux-api-opendota2/ https://kevin6767.github.io/redux-api-opendota2/

EDIT: It now seems to be showing a 404. I'm not even sure why this is not working at this point.编辑:它现在似乎显示 404。我什至不确定为什么此时这不起作用。 I've tried to many different methods.我尝试了许多不同的方法。

I am not sure how you uploaded your React application to GitHub Pages, but, here, I will be mentioning the correct way to do it:我不确定你是如何将 React 应用程序上传到 GitHub 页面的,但是,在这里,我将提到正确的方法:

Step 01 : Install gh-pages via the terminal, making sure you are in the correct file directory.步骤 01 :通过终端安装 gh-pages,确保您位于正确的文件目录中。

$ npm install gh-pages --save -dev (We are saving it as a dev dependency) $ npm install gh-pages --save -dev (我们将其保存为开发依赖项)

Step 02 : Go to your package.json and add步骤 02 :Go 到您的package.json并添加

"homepage": "{your_GitHub_username}.github.io/{repo_name}," above the "name" "homepage": "{your_GitHub_username}.github.io/{repo_name}," ,位于"name"上方

Step 03 : In the "scripts" section of package.json , add步骤 03 :在package.json"scripts"部分中,添加

"predeploy": "npm run build", "deploy": "gh-pages -d build",

Step 04 : Assuming that you have already committed and pushed your code to your Git Repo, now, in the terminal, use the command npm run deploy to see the changes in your GitHub Pages.步骤 04 :假设您已经提交并将代码推送到 Git 存储库,现在,在终端中,使用命令npm run deploy以查看 ZD3B7C913CD04EBFEC0E9EC32CB6FD58 中的更改。

Also, make sure that in your source code, you have set the same route for the homepage as in the package.json .另外,请确保在您的源代码中,您为homepage设置了与package.json中相同的路由。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM