I created a React Vite Js project a few weeks ago utilizing React Router with BrowserRouter and it was working fine. When I went to deploy some changes today, nothing of which messes with react router, the routing system broke. I shouldn’t say broke but it is super finicky. The base path loads with no problem. When the route is switched it is a toss up of what issue follows. It either gets re-routed back to the base path, like a refresh, or a firebase error pop up saying this path doesn’t exist.

I switched to HashRouter today in an attempt to solve this issue and stopped getting the Firebase error pop up, but am still getting instances where the route does not load but instead refreshes the base path.

To deploy the project, I first run npm run build and then firebase deploy.

When setting up hosting, I used firebase init chose hosting, set dist as my public directory, and set it up as a single page app (reroute all urls to /index.html).

Following I will put some of the code from the project:

Routing:

<HashRouter>
    <Sidebar openSidebarToggle={openSidebarToggle} OpenSidebar={OpenSidebar}/>
    <Header OpenSidebar={OpenSidebar}/>
    <Routes>
        <Route path='/' element={<Home/>} />
        <Route path='/messaging' element={<Messaging/>} />
        <Route path='/commands' element={<Commands/>} />
        <Route path='/genus' element={<Genus/>} />
        <Route path='/about' element={<AboutThisProject/>} />
        <Route path='/feedback' element={<Feedback/>} />
    </Routes>
</HashRouter>

Link To Open Route (Same for all routes but with different path)

<Link to='/messaging' style={{ textDecoration: 'none' }} onClick={{OpenSidebar}}>
    <li className='sidebar-list-item'>
        <a href="">
        <MdOutlineMessage className='icon'/> Messaging
        </a>
    </li>
</Link>

Firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    chunkSizeWarningLimit: 1600,
  },
})

The project is still being hosted, so if you want to see the error in action, the link is https://sasquatch-dashboard-34157.web.app/

Recreate
To recreate the issue, go to the link above, which is the web app, and then click an option in the sidebar.

The codebase can be found at https://github.com/Logan-Rising/DiscordBotDashboard-WebApp

If you have any questions or need clarification, please let me know.