React应用路由异常：本地正常生产环境仅根路径可访问

1. 移除React Router v6中无效的exact属性 #

React Router v6 已移除Route组件的exact属性，Routes组件默认会对路由进行精准匹配。保留exact会导致无效属性警告，甚至干扰路由匹配逻辑。修改你的App.js代码，删除所有Route上的exact：

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 path="/" element={<UserMain />} />

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

export default App;

2. 配置Netlify的重定向规则 #

单页应用(SPA)需要服务器将所有路由请求重定向到index.html，让React Router接管客户端路由。在项目根目录创建_redirects文件（注意文件名前的下划线），添加以下内容：

/*    /index.html   200

或者创建netlify.toml文件（二选一即可），内容如下：

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

将该文件提交到GitHub仓库，重新部署到Netlify即可。

3. 可选：修复嵌套路由逻辑（优化体验） #

当前你的/admin路由仅渲染Header，而子路由/admin/categories等不会包含Header，这可能不符合预期。如果需要在所有/admin开头的路由中显示Header，建议使用嵌套路由：

<Routes>
  <Route path="/" element={<UserMain />} />

  <Route path="/admin" element={<Header />}>
    <Route path="categories" element={<AdminMain />} />
    <Route path="categories/:categoryid/quiz" element={<AdminQuiz />} />
    <Route path="categories/:categoryid/quiz/:quizid/questions" element={<AdminQuestions />} />
  </Route>

  <Route path="/quiz/:id" element={<UserQuiz />} />
</Routes>

同时确保Header组件内部包含<Outlet />（需要从react-router-dom导入），用于渲染子路由内容：

import { Outlet } from "react-router-dom";

const Header = () => {
  return (
    <>
      {/* 你的Header内容 */}
      <Outlet /> {/* 子路由内容会在这里渲染 */}
    </>
  );
};

内容的提问来源于stack exchange，提问作者Huzaifa Aslam