为什么我的 vercel 项目在刷新时出现 404 错误？

Question

我有一个简单的 React + Vite 项目，我第一次在 Vercel 上部署它是为了好玩。但每当我在子路由上点击刷新时，它就会将我发送到 404 页面。

我使用react-router-v6 进行路由。当我在登陆页面上点击刷新时，没问题。但是，当我从登陆页面导航到另一条路线并点击刷新时，由于某种原因，它给了我 440 消息。

我不知道如何解决这个问题。任何帮助将不胜感激，谢谢！

我确实尝试将 vercel.json 文件添加到我的根目录，但我不知道如何配置它。目前这是

{
  "routes": [
    { "src": "/chat", "dest": "/Chat" },
    { "src": "/[^.]+", "dest": "/", "status": 200 }
  ]
}

这是我的 App.tsx 文件

import "./App.scss";
import Login from "./pages/Login/login";
import Chat from "./pages/Chat/chat";
import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="chat" element={<Chat />} />
      </Routes>
    </div>
  );
}

export default App;

Answer 1

在项目的根文件夹中创建一个名为 vercel.json 的文件，其中包含以下内容并重新部署；

{ "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }] }