After deploying in GitHub Pages React App does not show anything using react-router

Question

There is a problem with deployment of React App (create-react-app).

It works on GitHub Pages, and it works only when I write on local project.

npm start

If I close the project locally, the github pages also downs. I deployed 3 times already, but nothing help.

Need your help guys.

The code is:

import './css/style-form.css';
import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import { Audio } from  'react-loader-spinner';

const Main = lazy(() => import('./components/Main'));
const LogIn = lazy(() => import('./components/LogIn'));
const Contacts = lazy(() => import('./components/Contacts'));
const Error404 = lazy(() => import('./components/Error404'));

document.title = "Salary Balance"
function App() {

  return (
    <div className='home'>
      <BrowserRouter>
        <Header />
        <Suspense fallback={<div className="body__spinner" ><Audio height = "80" width = "80" radius = "9" color = 'black' ariaLabel = 'three-dots-loading' wrapperStyle wrapperClass /></div>}>
          <Routes>
            <Route element={<LogIn />} path='/'/>
            <Route element={<Main />} path='/main'/>
            <Route element={<Contacts />} path='/contacts'/>
            <Route element={<Error404 />} path='/*'/>
          </Routes>
        </Suspense>
      </BrowserRouter>
    </div>
  );
}

export default App;

Expecting a solution.

Answer 1

If someone also faces this problem do not worry.

All the problem is in:

BrowserRouter

To solve the problem we need:

<BrowserRouter basename='/salary-analysis'>
    <Header />
    <Suspense fallback={<div className="body__spinner" ><Audio height = "80" width = "80" radius = "9" color = 'black' ariaLabel = 'three-dots-loading' wrapperStyle wrapperClass /></div>}>
      <Routes>
        <Route path='/' element={<LogIn />} />
        <Route element={<Main />} path='/main'/>
        <Route element={<Contacts />} path='/contacts'/>
        <Route element={<Error404 />} path='/*'/>
      </Routes>
    </Suspense>
  </BrowserRouter>

Add the basename='' parameter for BrowserRouter.

basename is taken as the main route so other routes continues this link like:

domain.com/basename/your-link.

In my problem I always visited:

username.github.io/ but not: username.github.io/salary-analysis

So good luck guys.