一些react-router-dom路径显示空白页

Question

我在应用程序中使用react-router-dom进行导航。该应用程序在普通的Apache网络主机上运行。我已经像这样编辑.htaccess文件

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

这是我的代码

class App extends Component {


  render() {

    return (

      <div>
      <Layout>
      <HashRouter>
        <div>
            <HeaderTop/>

            <Header/>
         <Route exact path="/contact" component={ContactUs}/>
         <Route exact path="/about" component={AboutUs}/>
         <Route path="/search" component={Search} />
         <Route exact path="/" component={Body}/>

{
    arr.map((item, i) => {


      return  <Route key={uuid()}  path={"/safaris/" + item.title.split(" ").join("_")} component={(props) => <SafariItemExpandedUrlNav {...props} routeData={item} />}/>
    })
  }


            <Footer />

        </div>
      </HashRouter>





      </Layout>


      </div>
    );
  }
}

除从map函数生成的路由外，所有其他路由均正常工作。在map函数中返回的其他路由显示空白页。可能是什么问题？