Vite + React.js with React-router-dom gives 404 Error on Page reload

Question

This is my Package.json

{
  "name": "man_power",
  "version": "0.1.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^35.4.0",
    "@ckeditor/ckeditor5-react": "^5.0.5",
    "@material-ui/core": "^4.12.4",
    "@tailwindcss/forms": "^0.5.2",
    "chart.js": "^3.8.0",
    "chartjs-adapter-moment": "^1.0.0",
    "moment": "^2.29.4",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.0",
    "react-dom": "^18.2.0",
    "react-flatpickr": "^3.10.13",
    "react-icons": "^4.7.1",
    "react-loading-skeleton": "^3.1.0",
    "react-router-dom": "^6.3.0",
    "react-select": "^5.7.0",
    "react-select-country-list": "^2.2.3",
    "react-transition-group": "^4.4.2",
    "validator": "^13.7.0",
    "sweetalert": "^2.1.2"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^2.0.0",
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.6",
    "vite": "^3.0.0"
  }
}

This is my vite.config.js:

import { defineConfig } from "vite";
import postcss from "./postcss.config.js";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    "process.env": process.env,
  },
  css: {
    postcss,
  },
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: /^~.+/,
        replacement: (val) => {
          return val.replace(/^~/, "");
        },
      },
    ],
  },
  build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
  server: {
    host: true,
  },
});

I am using

npm run build

it outputs dist folder which contains: enter image description here

I was trying to navigate to different pages with react-router-dom but when I refresh on a *domainName/dashboard * I get a 404 error on the server.

Check it out at:

https://manpower1.xpertsgroup.net/

Answer 1

I tried some things, specifically I asked some people in Discord React flux. I solved the issue by making a .htaccess file in Public folder.

It included the following code:

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

He also said if this didn't work try this code:

    <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule> 

This was the explanation he gave:

the reason you get 404 is because the hosting server only knows about index.html. you reload on any other route then the react app isnt loaded so, on pretty mucll all hosting you have to follow this approach to make sure any 404 routes get redirected tot he index.html allowing react router to take control even with cra. If you build cra you end up with static assets to deploy, there's no difference 3xcept where you host. Some have the redirect setup, some don't.

I still need someone to explain me in detail.