React js github 部署

Question

我使用 gh-pages 在 github 上部署了我的 react js 项目。但是，我只看到一个白色的空白页。我检查了，我的页面是 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;

当前部署的网站

网络标签

Answer 1

确保用HashRouter 而不是普通的BrowserRouter 包装顶级组件。 GitHub Pages 不适用于 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;