無法將反應應用程序部署到 github 頁面 404 錯誤

Question

我目前正在嘗試將我的反應應用程序部署到 Netlify 或 GitHub 頁面，但我收到 404 錯誤或未加載應用程序。 在我的本地主機上一切正常。 我不太確定這是否是問題所在，但我認為我沒有正確地從 index.html 調用我的應用程序或 root。 另外我不確定這是否是問題所在。

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/

目前，這是我的索引。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>

這是我的 index.js

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


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

最后，這是我的 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>
  );
};

這是我的 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"
    ]
  }
}

任何幫助，將不勝感激！

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).

更新：除了更改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/" .

無法將反應應用程序部署到 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