Why doesn't my web page work after refresh?-CodePudding

I have created a react app that is live on the web using HostGator. When I refresh on the home page everything works fine however if I refresh on any other page it says the site does not exist and to go back a page. Does this have to do with how I have set up the routing? Everything works fine when running the app with vs code but not live on the web.

Here is the return in App.js

<BrowserRouter>
  <div>
     
  <Header/>
    <Routes>
      
      <Route path="/" element={<Home />} /> 
      {/* <Route  path="Home" element={<Home />} /> */}
      <Route  path="/WeeklyGoal" element={[ 
      <WeeklyGoal handleChange={handleChange} handleSubmit={handleSubmit} goal={goal} />,            
      <MilesForm goal={goal} milesToGo={milesToGo} setMilesToGo={setMilesToGo}  path="/MilesForm" />
]} />
        <Route path="/Weather" element={<Weather />} />
        <Route path="/Pace" element={<PaceCalculator />} />
    </Routes>        
  </div>
</BrowserRouter>

CodePudding user response：

Most likely it's about 1 small sign in the path={Whether} value for example. Try writing without the "/" sign. All official information can be found here: https://reactrouter.com/en/main/components/routes

CodePudding user response：

I contacted HostGator and apparently the shared hosting plan doesn't support React.js. I need a VPS for React instead.