0

This is the GitHub repo for a react travel website I created using MaterialUI and react-router-dom. When I run the app on my local server, it runs just fine. However, when I deployed it to GitHub pages, I began to get some issues:

  1. On initial load, only the header and footer shows. The main section is absent.
  2. When I click on the homepage, the videos and pictures do not load.
  3. When I refresh the page, it returns a 404 error page.

What do I do?

Jonathan Akhagbosu
  • 1

1 Answers1

0

I have taken a look through your code.

In App.js file. Try to change this

  <Router basename = {"/"}>
    <Navbar />
      <Route exact path="/" element={<Home />} />
      <Route path="/services" element={<Services />} />
      ...
    </Routes>
    <Footer />
  </Router>

to

  <Router>
    <Navbar />
      <Route path="/" element={<Home />} />
      <Route path="/services" element={<Services />} />
      ...
    </Routes>
    <Footer />
  </Router>
Huy Pham
  • 400
  • 4
  • 14
  • Hello, thanks for your help but I still have the same issue even after making the changes you suggested. – Jonathan Akhagbosu Sep 09 '22 at 03:26
  • I have cloned your repo. Do some changes following my answer above, adjust syntax errors `class` to `className` of React in `Footer.jsx` file and my deployment works fine. Also, you should notice the `key` `item` warning of React, this does not affect the deployment process but it's better to be fixed. – Huy Pham Sep 09 '22 at 07:29