Netlify and React Vite: Netlify says "Page not found" upon reloading in Vite and React site

I have the site built in React JS where I am using Vite as a JS Bundler. The problem is, when I deployed the site on Netlify and when reloading the page it says "Page not found".

I tried adding changing vite.config.jsfile.

import { defineConfig } from "vite";
import { resolve } from "path";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
      },
    },
  },
  plugins: [react()],
});

I also added .redirects file.

Please provide a solution for this, I see this as a common issue but it hasn't been addressed much.

I see this as a common issue but it hasn't been addressed much.

Addressing this issue can only happen through documentation, which unfortunately if not referred to, cannot be helped.

Without seeing your site and the description of this being a common issue, I can only "assume" you're talking about the 404 on refresh problem, just like the another similar question posted about yesterday: Routes not working properly in React using Vite (ON BUILD)

The solution is documented on React docs (well, Create React App, but valid in this case too): https://create-react-app.dev/docs/deployment/#netlify

You need to create a file, public/_redirects with the content:

/* /index.html 200

You already mention you've done that, but unless it follows the exact placement and syntax as above, it won't work.