Deploy React App with React Router to Github Pages not working

Question

I have a React app (with vite and typescript) that works fine when using npm run dev. The main page also shows up correctly on github pages.

But it seems as soon as I try to redirect to the Products page or contact page it gives me a 404. I'm a beginner in terms of React and this really confuses me (especially because it does work perfect in run dev mode).

App.tsx

import { BrowserRouter, Route, Routes } from "react-router-dom";

return (
    <div>
      <Header />
      <Cart cartItems={cartItems} setCartItems={setCartItems} />
      <Routes>
        <Route path="/shopping-cart" element={<Main />} />
        <Route
          path="shopping-cart/products"
          element={<Products setCartItems={setCartItems} />}
        />
        <Route path="shopping-cart/contact" element={<Contact />} />
      </Routes>
      <Footer />
    </div>
  );
}

main.tsx:

import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

vite config:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/shopping-cart/',
  plugins: [react()],
})

(Full code https://github.com/Fibox-coder/shopping-cart)

I tried a lot of things like using Switch instead of Routes and use HashRouter instead of BrowserRouter but nothing seems to work.

I have 3 URL's on the Github Pages when clicking the navbar:

Works: Home = https://fibox-coder.github.io/shopping-cart/

404 File not found: Products = https://fibox-coder.github.io/shopping-cart/products/ Contact = https://fibox-coder.github.io/shopping-cart/contact

Answer 1

React App must build for production so you should use Github Action in vitejs.dev tutorial for that. This is my way and working fine with me.

Config in vite.config.js help auto set base path:

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "~": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "src"),
    },
  },
  base: process.env.NODE_ENV === "production" ? "/shopping-cart/" : "",
});

You should create Github Action with .github/workflows/gh-page.yml for automation update "gh-pages" branch:

name: Deploy GH Pages

on: push

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      - name: Install
        run: yarn

      - name: Build
        run: yarn build

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages
          folder: dist

Go to Setting -> Pages -> change branch to "gh-pages" the same with BRANCH above and only working after you push code to Github (Github Action create "gh-pages" and working after Github Action run done about 1 minute)

For more infomation: https://vitejs.dev/guide/static-deploy.html#github-pages