how to redirect routes in Netlify using vite and react?

Question

I need to redirect to the home of a react project on Netlify but I'm using vite.

I used to do it using CRA (create-react-app) and creating the _redirects file in the public folder with this configuration.

/*  /index.html 200

How would I do it in vitejs?

Answer 1

Try creating a netlify.toml file in root directory.

in netlify.toml

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Answer 2

您可以在根目录中创建相同的 _redirects 文件，然后修改构建脚本以将其添加到 dist 文件夹，如下所示

  "build": "vite build && cp ./_redirects ./dist/_redirects",

Answer 3

@sarthak 's answer is good, you just get to copy _redirects to the dist folder upon build. Although there is an easier way to do so.

Just create a folder named public and put your _redirects there. Everything in this folder will be copied to dist as is.

Reference: https://vitejs.dev/guide/assets.html#the-public-directory

Answer 4

Turns out, we need to locate _redirects file inside the public folder, which will be moved into dist folder .netlify considers it as the root when we use vite) automatically during build time