Issue deploying React app on Github pages

Question

After creating my portfolio app with React I have integrated the required lines of code to use GitHub pages.

The app throws no error but no components appeared except the background color.

The code of App.js:

import './App.scss';
import { Route, Routes } from 'react-router-dom'
import Layout from './components/Layout';
import Home from './components/Home'
import About from './components/About'
import Contact from './components/Contact';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />}/>
        <Route path="about" element={<About />}/>
        <Route path="contact" element={<Contact />}/>
      </Route>
    </Routes>
  );
}

export default App;

The website is deployed at https://gregwdumont.github.io/Portfolio/.

Answer 1

Your site is deployed to a "subfolder" of the domain, so React Router does not match any route. You have to set the basename as:

<BrowserRouter basename='/Portfolio'>
...
</BrowserRouter>

See docs