vitejs 构建上的 react-router-dom v6 404 问题

Question

这是我的代码：

const router = createBrowserRouter([
    {
      path: "/",
      element: <Container />,
      children: [
        {
          index: true,
          element: <Home />,
        },
        {
          path: "/log-in",
          element: <Login />,
        },
        {
          path: "/contact",
          element: <Contact />,
        },
        {
          path: "/pricing",
          element: <Pricing />,
        },
      ],
    },
    {
      path: "/contract-preview",
      element: <ContractPreview />,
    },
    {
      path: "/*",
      element: <NotFound />,
    },
]);

在yarn build之后，当我从dist目录运行代码时（服务器上的情况相同）路由/contract-preview和/*不可访问我得到自定义服务器 404 页面 istead。

版本：

"vite": "^4.0.3",
"@vitejs/plugin-react": "^3.0.0",
"react-router-dom": "^6.6.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",

邀请配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
    plugins: [react()]
})

你有什么建议我可以解决这个问题吗？

Answer 1

您应该设置您的 Web 服务器以将 404 错误重定向到您的 index.html 文件。

单页应用程序背后的想法是 Web 服务器始终提供相同的页面。 应用程序加载后，React-router 会处理前端的页面显示。