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/.

CodePudding user response：

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

CodePudding user response：

2 ways you might end up like this; either you are not rendering any components on your page so in your index.js file, you are only setting the background-color of the page, but not rendering any components.

you need to import and render the components that you want to display on your page. For example, you could import your App component and render it:

import { App } from './App';

ReactDOM.render(<App />, document.getElementById('root'));

you may need to adjust the homepage field in your package.json file to match the URL of your deployed site. This field is used by the gh-pages package to determine the URL that the site will be deployed to.