Развертывание React js на github

#reactjs #github #deployment #github-pages

#reactjs #github #развертывание #github-страницы

Вопрос:

Я развернул свой проект react js на github с использованием gh-pages. Однако я вижу только белую пустую страницу. Я проверил, и моя страница была index.html … Почему это происходит и как это исправить?

Мой package.json файл

 {
  "homepage": "/my-music-journey",
  "name": "my-music-journey",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@google-cloud/storage": "^5.1.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "aos": "^3.0.0-beta.6",
    "firebase": "^7.17.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3"
  },
  "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"
    ]
  },
  "devDependencies": {
    "gh-pages": "^3.1.0"
  }
}

Мой app.js файл

 import React from "react";
import { Landing } from "./Pages/Landing";
import { Nav } from "./Components/Nav";
import { View } from "./Pages/View";
import { Upload } from "./Pages/Upload";
import AOS from "aos";
import "aos/dist/aos.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import firebase from "./firebase";

AOS.init({
  duration: 2000,
});

function App() {
  return (
    <Router>
      <Route path="/" exact component={Nav} />
      <Route path="/" exact component={Landing} />
      <Route path="/view" exact component={View} />
      <Route path="/upload" exact component={Upload} />
    </Router>
  );
}

export default App;

В настоящее время развернутый веб-сайт

Вкладка Сеть

1. Отображаются какие-либо предупреждения или ошибки?

2. нет, ничего на консоли

3. Убедитесь, что у вас включены предупреждения, а также проверьте вкладку «Сеть», чтобы узнать, загружены ли какие-либо ресурсы 404

4. Я добавлю вкладку сети на рис.

5. Пожалуйста, вместо того, чтобы делиться изображениями, поделитесь кодом index.js и преобразуйте изображение App.js в код… это помогло бы 😉

Ответ №1:

Убедитесь, что вы обернули компонент верхнего уровня с помощью HashRouter вместо обычного BrowserRouter. Страницы GitHub плохо работают с BrowserRouter.

Непроверенный, это должно сработать…

 import React from "react";
import { Landing } from "./Pages/Landing";
import { Nav } from "./Components/Nav";
import { View } from "./Pages/View";
import { Upload } from "./Pages/Upload";
import AOS from "aos";
import "aos/dist/aos.css";
import { HashRouter as Router, Route } from "react-router-dom";
import firebase from "./firebase"; // not needed hey?

AOS.init({
  duration: 2000,
});

function App() {
  return (
    <Router>
      <Route path="/" exact component={Nav} />
      <Route path="/" exact component={Landing} />
      <Route path="view" exact component={View} />
      <Route path="upload" exact component={Upload} />
    </Router>
  );
}

export default App;