-2

I created an website application with React, website looks fine in localhost, but once deployed to GitHub Pages one of the sections only appears when I refresh the page. The should section populate when the website is first visited not only on refresh. Home component contains Hero section and Cards section. enter image description here

enter image description here

Darian Jennings
  • 7
  • 1
  • 4

2 Answers2

1

Have you tried to wrap the elements in the Route?

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Services />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>

Instead of calling it as a component property

[Edit]

If that didn't do the trick, I found another stack question that could be the same issue

React Router not working with Github Pages

Basile
  • 150
  • 11
  • Thank you very much, I wrapped the elements in the Route instead of calling it as a component property. Why was this an issue / what's the difference between the two methods? – Darian Jennings Sep 19 '22 at 19:48
  • In short it is a difference in version. here is a stack answer on another question that also explains this somewhat in detail: [differences between component as prop or as child](https://stackoverflow.com/a/59256779/14476782) – Basile Sep 19 '22 at 19:54
  • Cheers, thank you for your help and references. – Darian Jennings Sep 20 '22 at 04:25
0

Since there is no details to the context, I can assume that the path for the element might be off, as it's something that differs between localhost and remote repository. If that's the case, make sure you have a relative path, rather than the absolute.

Vadym
  • 857
  • 7
  • 14
  • I have code for App.js added to my question , what do you mean the path for the element might be off. There should be no change from localhost to remote repository in regard to element path. – Darian Jennings Sep 19 '22 at 19:11