如何设置vite多页面react SPA并在其中一个页面上嵌套路由？

Question

这是 vite 配置，根索引页面是没有 javascript 的静态 HTML，app/index.htm 是一个 React 应用程序：

import { defineConfig } from "vite";
import { resolve } from "path";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        app: resolve(__dirname, "app/index.html"),
      },
    },
  },
});

应用程序内部：

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Page1 from "@/components/page1";
import Page2 from "@/components/page2";
const router = createBrowserRouter([
  {
    path: "/app",
    element: <App />,
    children: [
      {
        path: "page1",
        element: <Page1 />,
      },
      {
        path: "page2",
        element: <Page2 />,
      },
      {
        index: true,
        element: <Page2 />,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
      <RouterProvider router={router} />
  </React.StrictMode>
);

两个 SPA 都工作正常，但无法直接进入子页面，即 /app/page1

缺少什么配置？

Answer 1

我最近也在寻找解决方案，并发现了这个答案。

您可以在 Vite 配置中添加中间件来进行一些基本的 URL 重写，这样的操作可能适合您：

const { defineConfig } = require('vite')
module.exports = defineConfig({
  plugins: [
    {
      name: 'rewrite-middleware',
      configureServer(serve) {
        serve.middlewares.use((req, res, next) => {
          if (req.url.startsWith('/app/')) {
            req.url = '/app/'
          }
          next()
        })
      }
    }
  ]
})