Hello,

I am facing an issue with a 404: NOT_FOUND error in my app deployed to Vercel (everything works fine locally). My app is a React/Node.js application, and I use a frontend router to handle page navigation.

Here is a simplified version of my routing code:

1
<Router>
2
  <Routes>
3
    <Route element={<ProtectedRoute />}>
4
      <Route path="*" element={<AppPage />} />
5
    </Route>
6
    <Route path="/login" element={<LoginPage />} />
7
  </Routes>
8
</Router>

In the app, when the user doesn't have valid credentials, they are redirected to the /login page where they can enter their username and password.

Everything works fine in the browser when navigating to abc.vercel.app. If the user has the correct credentials, they are directed to abc.vercel.app/, and they see the <AppPage /> component. If not, they are redirected to abc.vercel.app/login where the <LoginPage /> is displayed.

However, the issue arises when I manually type abc.vercel.app/login into the browser or refresh the page while already on the login page (abc.vercel.app/login). In this case, I receive a 404: NOT_FOUND error from Vercel.

What I have tried so far:

Backend Redirection: I tried setting up redirects in my backend using Express, but it didn't solve the issue.

1
app.get("/login", (req, res) => {
2
  res.redirect("/");  // Redirect GET requests from /login to the root ("/")
3
});
4

5
app.post("/login", (req, res) => {
6
  res.redirect("/");  // Redirect POST requests from /login to the root ("/")
7
});

Vercel Redirects: I also added the following rewrite rule in my vercel.json, but this didn't work either

1
"rewrites": [
2
  {
3
    "source": "/login",
4
    "destination": "/"    <- also with /index.html etc 
5
  }
6
]
7

I'm unsure where the problem lies. I would appreciate any suggestions or guidance on how to resolve this issue. Thank you!