React JS github部署

如何解决React JS github部署

我使用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;

当前部署的网站

网络标签

解决方法

确保用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;