React app using react-router is not rendering home component when uploading to gh-pages

Question

Things I've tried so far:

Changed "start_url": ".", to "start_url": "/", and "start_url": "/index.html",

Imported the router using BrowserRouter and HashRouter

exact path on all my routes

Changed the home path from "/" to "/home" then redirected from "/" to "/home"

Right now it's saying "site not found" but it was working on a lot of the other deployment attempts I made. Every other route usually works properly except for the landing page

App component:

import { useState } from 'react';
import { HashRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
import Home from './pages/Home/Home';
import Register from './pages/Register/Register';
import Login from './pages/Login/Login';
import './App.css';
import Navbar from './components/Navbar/Navbar';
import DataContextProvider from './contexts/DataContext.js';

const App = () => {
    return (
        <>
            <DataContextProvider>
                <Router>
                    <Navbar />
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route path="/register" component={Register} />
                        <Route path="/login" component={Login} />
                    </Switch>
                </Router>
            </DataContextProvider>
        </>
    );
};

export default App;

package.json:

{
    "name": "authentication",
    "homepage": "https://dmm22.github.io/authentication",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.13.0",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
        "axios": "^0.21.1",
        "gh-pages": "^3.2.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.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"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

manifest.json:

{
    "short_name": "React App",
    "name": "Create React App Sample",
    "icons": [
        {
            "src": "favicon.ico",
            "sizes": "64x64 32x32 24x24 16x16",
            "type": "image/x-icon"
        },
        {
            "src": "logo192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "logo512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "start_url": ".",
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff"
}

Most recent deployment: https://dmm22.github.io/authentication/

Github repo: https://github.com/dmm22/authentication

Answer 1

The create react app documentation says that:

GitHub Pages doesn’t support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42, where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:

• You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Read more about different history implementations in React Router.

Therefore you should use hashHistory if you want to host your site on GitHub Pages. Here is the link to documentation.

If you don't wish to change router, try deploying it on Netlify which is also another free hosting provider. But again for Netlify deployment, follow the documentation, which says:

To support pushState, make sure to create a public/_redirects file with the following rewrite rules:

/*  /index.html  200