部署在 s3 存储桶上的 React 应用程序仅显示主页。哈希路由器不工作

Question

我在 s3 存储桶上部署了一个 React 应用程序。仅首页显示其他页面不显示。我在其他页面上收到 404 错误。我已从

browserHistory

更改为

hashHistory

，问题仍然存在。

当我检查控制台时收到 404 错误。

index.js

<Provider store={store}>
  <HashRouter>
    <Theme>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Theme>
  </HashRouter>
</Provider>

应用程序.js

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/manager/login" element={<Manager />} />
        <Route path="/receptionist/login" element={<Receptionist />} />
        <Route path="/" exact element={<Receptionist />} />
      </Routes>
    </div>
  )
}

我还向 package.json 添加了主页

"homepage": ".",

我在我的 React 应用程序上运行了 npm build 并在构建文件夹中获取了静态文件

我将构建文件夹的内容移动到我创建的 s3 存储桶中。

我在存储桶上启用了静态托管，并更改了存储桶权限

{
"Version": "2012-10-17",
"Statement": [
    {
        "Sid": "PublicReadGetObject",
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::marble-arch-prod/*"
    }
]

}

我取消选中块访问以允许流量到达存储桶。

Answer 1

您应该配置您的 s3 网站以将 404 重定向到您的 index.html 文件。 这篇文章解释了你可以如何做。

单页面应用程序背后的想法是网络服务器始终提供相同的页面。如果页面不存在，这就是反应路由器的作用来显示它，但应用程序加载正确。

Answer 2

已经一年了，解决方案有更新吗？