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

admin管理员组

文章数量:1278721

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";

// /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 mon issue but it hasn't been addressed much.

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 mon issue but it hasn't been addressed much.

• javascript
• reactjs
• deployment
• vite
• netlify

Share Improve this question Follow asked Feb 8, 2023 at 13:52 Ali Ahmed KhanAli Ahmed Khan 15822 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

I see this as a mon 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 mon 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.

For Netlify

To set up a _redirects file in your public folder, follow these steps. Assuming you're using React with Vite:

1. Navigate to your project's public folder.

2. Create a new file named _redirects.

3. Paste the following code into the _redirects file:

   /* /index.html 200

For Vercel

Create a file named vercel.json in the root folder of your project.

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

Same issue: Click Here

本文标签：