Reactjs – React App Routing Issue: Works on Localhost but Fails on Production (except "/")

Hello Stack Overflow community,

I’m encountering a perplexing issue with my React application’s routing. The application works flawlessly on localhost, but when deployed to production, only the root path ("/") is accessible. All other routes seem to fail.

Details:

I’m using React Router for navigation.

The application structure is as follows (simplified):

import { Box } from "@chakra-ui/react";
import { Route, Routes } from "react-router-dom";
import Header from "./Components/Header/header";
import AdminMain from "./Components/Main/Admin/adminMain";
import AdminQuiz from "./Components/Quiz/adminQuiz";
import AdminQuestions from "./Components/Question/adminQuestions";
import UserMain from "./Components/Main/User/userMain";
import UserQuiz from "./Components/Main/User/userQuiz";

const App = () => {
  return (
    <Box>
      <Routes>
        <Route exact path="/" element={<UserMain />} />

        <Route path="/admin" element={<Header />} />
        <Route exact path="/admin/categories" element={<AdminMain />} />
        <Route
          exact
          path="/admin/categories/:categoryid/quiz"
          element={<AdminQuiz />}
        />
        <Route
          exact
          path="/admin/categories/:categoryid/quiz/:quizid/questions"
          element={<AdminQuestions />}
        />
        {/* </Route> */}
        <Route exact path="/quiz/:id" element={<UserQuiz />} />
      </Routes>
    </Box>
  );
};

export default App;

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ChakraProvider } from "@chakra-ui/react";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <ChakraProvider>
        <App />
      </ChakraProvider>
    </BrowserRouter>
  </React.StrictMode>
);

Additional Information:

I have verified the following:
Base URL is correctly set.
Server is configured to handle client-side routing.
No console errors or warnings in the development environment.
The issue persists after clearing the browser cache.

Website URL
https://musical-biscotti-ee3046.netlify.app/

GitHub Repository:
https://github.com/huzaifa-aslam/alex-quiz-app-front-end.git

How can the community help me troubleshoot and resolve this issue?

I appreciate any insights or suggestions you can provide to help me identify and fix this routing problem in my production environment.

Thank you in advance!