无法将反应应用程序部署到 github 页面 404 错误

Question

I'm currently trying to deploy my react app to either Netlify or GitHub Pages, but I'm receiving a 404 error or not loading the app.我目前正在尝试将我的反应应用程序部署到 Netlify 或 GitHub 页面，但我收到 404 错误或未加载应用程序。 Everything runs fine on my local host.在我的本地主机上一切正常。 I'm not too sure if this is the problem, but I think I'm not properly calling my app or root from the index.html.我不太确定这是否是问题所在，但我认为我没有正确地从 index.html 调用我的应用程序或 root。 Also I'm not sure if this is the problem.另外我不确定这是否是问题所在。

Here is my github page (doesn't run the app): https://mattfang1999.github.io/matt-task-manager-app/ Here is the netlify (404 error): https://condescending-galileo-fe4225.netlify.app/ Here is my github page (doesn't run the app): https://mattfang1999.github.io/matt-task-manager-app/ Here is the netlify (404 error): https://condescending-galileo-fe4225 .netlify.app/

Currently, here is my index.html:目前，这是我的索引。html：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="icon" href="http://example.com/favicon.png">


    
  <title>Matt's Task Manager</title>
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
</body>

</html>

And here is my index.js这是我的 index.js

import React from 'react';
import { render } from 'react-dom';
import  {App}  from './App';
import './App.scss';


render(<App />, document.getElementById('root'));

Finally, here is my App.js最后，这是我的 App.js

import React, {useState} from 'react';
import { Header } from './components/layout/Header';
import { Content } from './components/layout/Content';

import { ProjectsProvider, SelectedProjectProvider} from './context';




export const App = ({ darkModeDefault = false }) => {
  const [darkMode, setDarkMode] = useState(darkModeDefault);
  return (
    <SelectedProjectProvider>
      <ProjectsProvider>
        <main
          data-testid="application"
          className={darkMode ? 'darkmode' : undefined}
        >
          <Header darkMode={darkMode} setDarkMode={setDarkMode} />
          <Content />
        </main>
      </ProjectsProvider>
    </SelectedProjectProvider>
  );
};

Here is my package.json这是我的 package.json

{
  "homepage": "https://mattfang1999.github.io/matt-task-manager-app/",
  "name": "taskmanagerapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "firebase": "^6.2.4",
    "gh-pages": "^3.1.0",
    "install": "^0.13.0",
    "moment": "^2.24.0",
    "node-sass": "^4.12.8",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-icons": "^3.11.0",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "predeploy": "npm run build",
"deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Any help would be appreciated!任何帮助，将不胜感激！

Answer 1

I've cloned your repo and could successfully deploy it to GitHub Pages when I moved the content of the taskmanagerapp folder up one level and run npm run deploy in the root folder (where the package.json file is). I've cloned your repo and could successfully deploy it to GitHub Pages when I moved the content of the taskmanagerapp folder up one level and run npm run deploy in the root folder (where the package.json file is).

Update: I've also tried to deploy it without changing anything apart from changing the homepage URL in the package.json file and it's been also deployed fine .更新：除了更改package.json文件中的homepage URL 之外，我还尝试在不更改任何内容的情况下部署它，并且它也已部署好。

Update 2: If my repo's URL is https://github.com/zsoltime/pospof , I set my homepage in package.json to "homepage": "https://zsoltime.github.io/pospof/" . Update 2: If my repo's URL is https://github.com/zsoltime/pospof , I set my homepage in package.json to "homepage": "https://zsoltime.github.io/pospof/" .

无法将反应应用程序部署到 github 页面 404 错误

问题描述

1 个解决方案

解决方案1
0 2020-12-12 20:08:35

无法将反应应用程序部署到 github 页面 404 错误

问题描述

1 个解决方案

解决方案1 0 2020-12-12 20:08:35

解决方案1
0 2020-12-12 20:08:35