Why is my vercel project giving me an error 404 on refresh? [duplicate]

Question

I have a simple React + Vite project that I deployed on Vercel for the first time for fun. But whenever i hit refresh on a sub-route, it sends me to a 404 page.

I'm using react-router-v6 for the routing. When i hit refresh on the landing page, no problem. But when i navigate from the landing page to a another route and hit refresh, it gives me the 440 message for some reason.

I have no idea on how to fix this. Any help would be appreciated, thank you!

I did try adding a vercel.json file to my root directory but i have no idea how to configure it.. this is currently

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

this is my App.tsx file

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

Create a file called vercel.json on the root folder of your project with the following content and redeploy;

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

Answer 2

Ensure that your server is configured to redirect all requests to your index.html file. For Vercel, create a vercel.json file with the following configuration:

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