1

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;
julcodecode
  • 83
  • 6
  • Does this help answer your question? https://stackoverflow.com/questions/64815012/why-does-react-router-not-works-at-vercel – Drew Reese Apr 08 '23 at 07:13

1 Answers1

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 }] }
Deniz Orsel
  • 11
  • 1