Hice una página web con react router v6, aparentemente las rutas están bien, pero cuando renderizo mi página en github por segunda vez, da un 404. Eso no sucede cuando uso mi host local. Me dijeron que usara BrowserRouter o Hashrouter pero da un error

 bundle.js:47865 Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

Entonces, decidí dejarlo así, funciona bien, pero no correctamente en github

 import React, { useState } from "react"; import Homepage from "./pages/homepage/Homepage"; import Slider from "./components/slider/Slider"; import Header from "./components/nav/Nav"; import Products from "./pages/product/Product"; import ScrollToTop from "./components/ScrollToTop"; import CheckOut from "./pages/checkout/Checkout"; import HorizontalLinearStepper from "./pages/stepper/Stepper"; import { Routes, Route } from "react-router-dom"; import { CartContext, CounterContext, TotalContext, ShippingContext, } from "./context/AppContext"; function App() { let count = useState(0); // Number of items added into cart let [cart, setCart] = useState([]); // Array to store the items let [total, setTotal] = useState([]); let [shippingDetails, setShippingDetails] = useState({}); console.log("cart", cart); return ( <CartContext.Provider value={[cart, setCart]}> <TotalContext.Provider value={[total, setTotal]}> <CounterContext.Provider value={count}> <ShippingContext.Provider value={[shippingDetails, setShippingDetails]} > <div> <Header /> <Slider /> <ScrollToTop /> <Routes> <Route path="/" element={<Homepage />} /> <Route path="/products" element={<Products />} /> <Route path="/checkout" element={<CheckOut />} /> <Route path="/payment" element={<HorizontalLinearStepper />} /> </Routes> </div> </ShippingContext.Provider> </CounterContext.Provider> </TotalContext.Provider> </CartContext.Provider> ); }

¿Alguien puede entender lo que está pasando? ¡Muchas gracias!