Problem :

After Deploy my website, the only page i can access it is the home page , and the other routes i can't access them. I switched to HashRouter ("react-router-dom": "^5.3.3",) is working fine, but i have ("i18next-browser-languagedetector": "^6.1.4") it cannot work with HashRouter. is there any way i could use just BrowserRouter instead of HashRouter.

App.jsx :

i18n
  .use(initReactI18next)
  .use(LanguageDetector)
  .use(HttpApi)
  .init({
    supportedLngs: ["en", "ar", "fr"],
    fallbackLng: "en",
    detection: {
      order: ["path", "cookie"],
      caches: ["cookie"],
    },
    backend: {
      loadPath: "/assets/locales/{{lng}}/translation.json",
    },
  });

const App = () => {
  return (
    <>
      <Router>
        <Switch>
           <Route path="/en" element={<Home />}></Route>
           <Route path="/en/features" element={<featues/>}></Route>
           <Route path="/en/pricing" element={<pricing />}></Route>
           <Route path="/en/aboutUs" element={<aboutUs />}></Route>
        </Switch>
      </Router>
    </>
  );
};

package.json :

{"homepage": ".","dependencies": {
    "i18next": "^20.6.1",
    "i18next-browser-languagedetector": "^6.1.4",
    "i18next-http-backend": "^1.4.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-i18next": "^11.18.0",
    "react-router-dom": "^5.3.3",
    "react-scripts": "5.0.1",
  },}