Why does my React Website fail to load up images and videos when deployed to GitHub pages?

Jonathan Akhagbosu 0
Viewed 34

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?

github-pages react-router-dom reactjs
1 Answers

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>
HuyPham0
Related