0

I am facing this weird issue where the Home component does not load when the app loads. And this issue is appearing on Github pages site, not on localhost.

On localhost the App component loads as soon as the app loads.

What could be the reason?

Here's the URL of gh-pages website:

https://umair-mirza.github.io/safetyapp/

Here's the code of the App component:

function App() {
  return (
      <>
      <Router>
        <NavBar />
        <div className="py-4 px-6 flex md:gap-x-4">
        <LeftNav />
          <div className="xs:w-full md:w-4/5">
                  
                  <Routes>
                      <Route path='/' element={<Home />} />
                      <Route path='/audit-inspection' element={<AuditInspection />} />
                      <Route path='/my-responsibilities' element={<MyResponsibilities />} />
                      <Route path='/incident-management' element={<IncidentManagement />} />
                      <Route path='/learning-management' element={<LearningManagement />} />
                      <Route path='/observations-feedback' element={<ObservationsFeedback />} />
                      <Route path='/performance-analytics' element={<PerformanceAnalytics />} />
                      <Route path='/risk-management' element={<RiskManagement />} />
                  </Routes>
          </div>
        </div>
        </Router>
      </>
  );
}
Umair
  • 313
  • 3
  • 10

1 Answers1

0

i had the same problem with gh-pages, and i've fixed by adding basename like it mentioned here , so instead of

    <Router>
       <NavBar />
       .
       .

use this:

    <Router basename="/safetyapp"> //your repo name as basename
       <NavBar />
       .
       .

This will fix the navigation issue, but you will have another issue, when refreshing, the server returns 404 because GitHub Pages don't natively support single page, and i think these instructions will helps you

ismail bilal
  • 80
  • 1
  • 3