React.js (Vite) application returns 404 when refreshed on route

user_10339199 0
Viewed 1316
Nevermind...

Mistake was related to the codebase (where I'm using monorepo and vercel.json was on the root directory. After moving vercel.js to package with react application everything was working perfectly.

The 404 Problem

I have a simple React.js application with wouter-based routing and Vercel deployments that drive me into a little issue where I have no idea about the solution. It always returns 404 after refresh (of subpage).

My code looks a bit like this.

    <>
        <Route path='/' component={Intro} />
        <Route path='/dashboard' component={Dashboard} />
    </>

Where on <Intro /> I have <Link /> to /dashboard which should transfer me to <Dashboard /> page. And it does work on my local machine, in a container, and on Linux-based deployment, but it doesn't really work in vercel deployment, even if I tried to resolve this issue with the configuration of vercel.json.

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

Also tried an alternative version of rewrites and still the same issue.

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

Link to live deployment available here: pointrest-6ttd9zep8-araclx.vercel.app

NOTE: I was also trying to use react-router but the same problem exists. Same problem exist when application is hosted on netlify but doesn't exist at all when hosted on heroku or run inside docker container.

vercel vite netlify reactjs
1 Answers

You can a create simple rewrites rules in the serve. In my case I use Vercel. Then you can find something similar this.

Create in the project root a file vercel.json

And writer

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

P.S.: Don't forget to enable rewrites in vercel.

user_124226600
Related