React Router部署到Banahosting后导航失效问题求助

本地环境中点击页面链接可正常刷新导航，但部署到Banahosting服务器后，点击链接时地址栏URL会变化，页面却不会加载对应路由的内容；手动输入目标URL并刷新页面则能正常加载。

我使用react-router-dom实现路由功能，主文件App.js配置如下：

import React, { createContext } from "react";
import { BrowserRouter  as Router } from "react-router-dom";
import "./App.css";
import TopBar from "./components/TopBar";
import MainContent from "./components/MainContent";
import Footer from "./components/Footer";

export const CurrencyContext = createContext();

const App = () => {
  const currency = "€";
  return (
    <CurrencyContext.Provider value={currency}>
      <Router basename={process.env.PUBLIC_URL}>
        <div className="app">
          <TopBar />
          <MainContent />
          <Footer></Footer>
        </div>
      </Router>
    </CurrencyContext.Provider>
  );
};

export default App;

已尝试的解决措施：

• 使用<HashRouter>替代<BrowserRouter>，URL变为类似https://quierotraspasarlo.com/#/city/2的格式，但问题仍存在；
• 在应用public目录添加.htaccess文件并配置规则，同时确认服务器已启用Apache mod_rewrite模块：

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

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

• 在package.json中设置homepage字段为应用URL："homepage": "https://quierotraspasarlo.com"

尽管尝试了以上所有方法，问题仍未解决。以下是MainContent.js的代码：

import React, { useState } from "react";
import { Routes, Route } from "react-router-dom";
import CityCarousel from "./CityCarousel";
import WelcomeBanner from "./WelcomeBanner";
import WhyQuieroTraspasarlo from "./WhyQuieroTraspasarlo";
import CityPage from "./CityPage";
import BusinessPage from "./BusinessPage";
import PrivacyPolicy from "./PrivacyPolicy";
import ConditionsOfUse from "./ConditionsOfUse";
import NotFoundPage from "./NotFoundPage";
import AllCitiesPage from "./AllCitiesPage";
import ImInterestedContactForm from "./ImInterestedContactForm";
import BusinessContext from "./BusinessContext";
import IHaveABusinessForm from "./IHaveABusinessForm";
import BusinessAdBanner from "./BusinessAdBanner";
import PopularBusinessesBanner from "./PopularBusinessesBanner";
import HowQuieroTraspasarloWorks from "./HowQuieroTraspasarloWorks";
import "./MainContent.css";

const FullHome = () => {
  return (
    <>
      <WelcomeBanner />
      <div className="break-0x2vw" />
      <CityCarousel />
      <div className="break-0x2vw" />
      <PopularBusinessesBanner />
      <div className="break-0x2vw" />
      <HowQuieroTraspasarloWorks />
      <div className="break-0x2vw" />
      <BusinessAdBanner />
      <div className="break-0x2vw" />

      <WhyQuieroTraspasarlo />
      <div className="break-0x2vw" />
    </>
  );
};

const MainContent = () => {
  const [businessData, setBusinessData] = useState({});

  return (
    <BusinessContext.Provider value={{ businessData, setBusinessData }}>
      <Routes>
        <Route path="/" element={<FullHome />} />
        <Route path="/city/:cityId" element={<CityPage />} />
        <Route
          path="/city/:cityId/business/:businessId"
          element={<BusinessPage setBusinessData={setBusinessData} />}
        />
        <Route path="/contact" element={<ImInterestedContactForm />} />
        <Route path="/all-cities" element={<AllCitiesPage />} />
        <Route path="/privacy-policy" element={<PrivacyPolicy />} />
        <Route path="/conditions-of-use" element={<ConditionsOfUse />} />
        <Route path="/publish-business" element={<IHaveABusinessForm />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </BusinessContext.Provider>
  );
};

export default MainContent;

恳请各位提供建议或指导，指出我可能遗漏的地方，非常感谢！

注：此问题并非个例，任何将React单页应用部署到托管服务的开发者都可能遇到类似问题。

内容的提问来源于stack exchange，提问作者joangm_