在 Github 页面上部署

Question

我用 react+sass 创建了我的投资组合，我添加了一些状态和 jquery 动画，我在 Github 页面上部署了我的投资组合。 该投资组合仅使用 ReactJS 制作。 当我打开链接时，它显示为白色，只有标题和网站图标。 控制台上没有错误有人可以帮助我吗？

我的 App.js

import React from 'react';
import {HashRouter as Router, Route} from 'react-router-dom'
import './components/styles/main.scss'
import Home from './components/home'
import Works from './components/works'
import About from './components/about'


function App() {
  return (
    <Router basename={window.location.pathname || ''}>
    <div className="App">
       <Route exact path="/home"  component={Home} />
       <Route exact path="/works" component={Works} />
       <Route exact path="/about" component={About} />
    </div>
    </Router>
  );
}

export default App;

我的 Package.json

{
  "name": "Portofolio",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://batistatony.github.io/batistaoliveira/home",
  "dependencies": {
    "axios": "^0.19.0",
    "express": "^4.17.1",
    "express-favicon": "^2.0.1",
    "gh-pages": "^2.2.0",
    "jquery": "^3.4.1",
    "node-sass": "^4.13.1",
    "path": "^0.12.7",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "redux": "^4.0.4"
  },
  "scripts": {
    "start": "node server.js",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

链接： https : //batistatony.github.io/batistaoliveira/home

Answer 1

将 package.json 中的homepage替换为"." ， 像这样：

  "homepage": ".",

这将解决白页问题，您的作品集应该可以通过以下网址访问： https : //batistatony.github.io/batistaoliveira/

现在，react-router-dom 的BrowserRouter不适用于 GitHub Pages，您目前使用的HashRouter很棒，只需删除 basename 参数。 GitHub的网页不支持任何URL重写功能，因此您将无法使用BrowserRouter与像一个链接： https://batistatony.github.io/batistaoliveira/home ，你将需要使用https：//开头batistatony。 github.io/batistaoliveira/#/home （使用HashRouter ）。