React app deployment on GitHub Pages displays a blank page

I've developed a react app that is running fine locally. I'm now trying to deploy it using GitHub Pages.

Despite following this tutorial, I get a blank page, and several 404 errors in the logs.

Here is my index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import {HashRouter} from "react-router-dom";
import './index.css';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <HashRouter>
            <App />
        </HashRouter>
    </React.StrictMode>
);

And the Route defined in App.js

return (
    <>
        <Navbar/>
        <Routes>
            <Route path='/' element={<CoinsTable coins={coins}/>}/>
            <Route path='/coin' element={<CoinDetails/>}>
                <Route path=':coinId' element={<CoinDetails/>}/>
            </Route>
            <Route path='/option-prices' element={<CoinOptionsTable/>}>
                <Route path=':coinId' element={<CoinOptionsTable spotValue={1500} />}/>
            </Route>
        </Routes>

    </>
);

Here is the homepage property I've added to the project's package.json:

"private": false,
"homepage": "https://myusername.github.io/myusername/myappname",

I've added this to scripts:

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

Then I run this command to deploy the app:

npm run deploy


Comments

Popular posts from this blog

Today Walkin 14th-Sept

Spring Elasticsearch Operations

Hibernate Search - Elasticsearch with JSON manipulation