Deploy on Github Pages

Question

I created my portfolio with react+sass, I added some states and jquery animations I deployed my portfolio on Github-pages. The portfolio was made just with ReactJS. When I open the link it appears white, just with title and favicon. There is no error on console somebody can help me?

My 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;

My 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"
    ]
  }
}

link: https://batistatony.github.io/batistaoliveira/home

Answer 1

Replace your homepage in package.json with "." , like this:

  "homepage": ".",

This will resolve the white page problem, your portfolio should be accessible at: https://batistatony.github.io/batistaoliveira/

Now, react-router-dom's BrowserRouter will not work well with GitHub Pages, you currently use HashRouter which is great, just remove the basename parameter. GitHub Pages doesn't support any URL rewrite feature, so you will not be able to use BrowserRouter with a link like: https://batistatony.github.io/batistaoliveira/home , you will need to use https://batistatony.github.io/batistaoliveira/#/home (with HashRouter ).