使用Vite构建后React Router路由失效问题求助

我正在开发一个博客类应用，使用React Router配置了首页和注册页。Vite开发环境下能正常访问/sign-up页面，但构建后用live server访问时，出现「Cannot GET /sign-up」错误，无法跳转至注册页。

已尝试方案 #

• 配置Vite的server.historyApiFallback: true，但未生效

预期效果 #

访问/sign-up时能正常渲染对应的SignUp组件

相关代码 #

Vite配置 #

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    test: {
        globals: true,
        environment: "jsdom",
        setupFiles: "./setupTests.js",
    },
    server: {
        historyApiFallback: true,
    },
});

package.json #

{
    "name": "bashnode",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
        "preview": "vite preview",
        "test": "vitest",
        "coverage": "vitest run --coverage"
    },
    "dependencies": {
        "prop-types": "^15.8.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-responsive": "^9.0.2",
        "react-router-dom": "^6.11.2"
    },
    "devDependencies": {
        "@testing-library/jest-dom": "^15.16.5",
        "@testing-library/react": "^14.0.0",
        "@testing-library/user-event": "^14.4.3",
        "@types/react": "^18.0.28",
        "@types/react-dom": "^18.0.11",
        "@vitejs/plugin-react-swc": "^3.0.0",
        "autoprefixer": "^10.4.14",
        "eslint": "^8.38.0",
        "eslint-plugin-jest-dom": "^4.0.3",
        "eslint-plugin-react": "^7.32.2",
        "eslint-plugin-react-hooks": "^4.6.0",
        "eslint-plugin-react-refresh": "^0.3.4",
        "jsdom": "^22.0.0",
        "postcss": "^8.4.23",
        "tailwindcss": "^3.3.2",
        "vite": "^4.3.2",
        "vitest": "^0.31.1"
    }
}

React路由代码 #

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Root from "./routes/root";
import ErrorPage from "./error-page";
import SignUp from "./routes/sign-up";
import "./index.css";

const router = createBrowserRouter([
    {
        path: "/",
        element: <Root />,
        errorElement: <ErrorPage />,
    },
    {
        path: "/sign-up",
        element: <SignUp />,
        errorElement: <ErrorPage />,
    },
]);

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

解决方案 #

问题核心是你只配置了开发服务器的路由回退，而构建后的静态文件需要适配SPA路由的服务器规则，第三方live server默认不支持该规则。

方案1：使用Vite官方预览服务器 #

构建完成后，不要用第三方live server打开dist目录，执行以下命令启动Vite预览服务器：

npm run preview

同时更新Vite配置，给预览服务器也开启路由回退：

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

export default defineConfig({
    plugins: [react()],
    test: {
        globals: true,
        environment: "jsdom",
        setupFiles: "./setupTests.js",
    },
    server: {
        historyApiFallback: true,
    },
    // 新增：预览服务器开启路由回退
    preview: {
        historyApiFallback: true,
    },
});

此时访问/sign-up即可正常加载组件。

方案2：适配VS Code Live Server插件 #

如果必须使用第三方live server，以VS Code的Live Server为例，修改插件设置：

1. 打开VS Code设置，搜索「Live Server: Custom Configuration」
2. 添加以下配置：

{
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}

该配置会让所有路由请求都回退到index.html，交由React Router处理客户端路由。

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