React 应用程序路由问题：在本地主机上工作但在生产中失败（“/”除外）

Question

Stack Overflow 社区您好，

我的 React 应用程序的路由遇到了一个令人困惑的问题。该应用程序在本地主机上完美运行，但部署到生产环境时，只能访问根路径（“/”）。所有其他路线似乎都失败了。

详情：

我正在使用 React Router 进行导航。

应用程序结构如下（简化）：

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;

附加信息：

我已验证以下内容： 基本 URL 设置正确。 服务器配置为处理客户端路由。 开发环境中没有控制台错误或警告。 清除浏览器缓存后问题仍然存在。

网站网址 https://musical-biscotti-ee3046.netlify.app/

GitHub 存储库： https://github.com/huzaifa-aslam/alex-quiz-app-front-end.git

社区如何帮助我排查并解决此问题？

非常感谢您提供的任何见解或建议，以帮助我在生产环境中识别和解决此路由问题。

提前谢谢您！

Answer 1

看起来您没有使用

BrowserRouter

 中的 

react-router-dom

<BrowserRouter>
<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>
</BrowserRouter>