React应用部署Vercel/Netlify后路由刷新404问题求助

问题描述 #

我通过GitHub将React应用部署到Vercel，页面右上角的Navigate按钮可正常跳转路由，但刷新页面会出现404 Not Found错误，该问题在Netlify部署时同样存在，怀疑这与Vite配置有关。

相关代码 #

Vite配置文件 #

import tsconfigPaths from "vite-tsconfig-paths";
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  server: {
    port: 4000,
  },
});

Vite文档说明base: "/"为默认值，无需额外配置。

main.tsx #

import React from "react";
import App from "./App.tsx";
import "@mantine/core/styles.css";
import "@mantine/carousel/styles.css";
import ReactDOM from "react-dom/client";
import { Provider } from "react-authbox";
import { theme } from "@/configs/theme.ts";
import { MantineProvider } from "@mantine/core";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <MantineProvider theme={theme}>
      <Provider fetchUserUrl="http://localhost:3000/api/user">
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>
    </MantineProvider>
  </React.StrictMode>
);

app.tsx #

import Routes from "@/routes/routes";

const App = () => <Routes />;

export default App;

Routes.tsx #

import AddBusinessInformationPage from "@/pages/client/addbusinessinformationpage";
import SelectCategoriesPage from "@/pages/client/selectcategoriespage";
import ProfileSetingsPage from "@/pages/client/profilesettingspage";
import { FormProvider } from "@/providers/formprovider";
import { Routes, Route } from "react-router-dom";
import ClientLayout from "@/components/layouts";
import HomePage from "@/pages/client/homepage";
import { FC } from "react";

const RoutesComponent: FC = () => {
  return (
    <Routes>
      <Route
        path="/"
        element={
          <FormProvider>
            <ClientLayout />
          </FormProvider>
        }
      >
        <Route index element={<HomePage />} />
        <Route path="profile-settings" element={<ProfileSetingsPage />} />
        <Route path="select-category" element={<SelectCategoriesPage />} />
        <Route
          path="/add-business-information"
          element={<AddBusinessInformationPage />}
        />
      </Route>
    </Routes>
  );
};

export default RoutesComponent;

已尝试的解决方法 #

已尝试使用默认的base: "/"配置，但问题仍未解决。

内容的提问来源于stack exchange，提问作者fahad saleem