时间戳

首页 > 解决方案 > S3 存储桶无法通过路由加载 React 应用程序

javascript - S3 存储桶无法通过路由加载 React 应用程序

问题描述

所以我目前处于这种情况，我想在 S3 存储桶中显示我的反应应用程序。当我将应用程序部署到 S3 存储桶时，它给了我一个静态 URL，我可以看到应用程序，例如；

https://s3bucket.www.react-application.cloud/apps/calculationapp/24995X095636Fb9b5821/index.html

在我的情况下，我看到一个空页面，我的假设是我在 index.js 文件中配置我的反应路由的方式存在一些问题；

index.js

 const getBasename = path => path.substr(0, path.lastIndexOf('/'));
 ReactDOM.render(
        <BrowserRouter basename={getBasename(window.location.pathname)}>
            <App />
        </BrowserRouter>,
        boostrapElement
    );

我说这很可能是问题的原因是当我简单地部署它时；

ReactDOM.render(
    <h1> Show me something ! </h1>
    boostrapElement
);

它运行良好，我能够看到 h1

应用程序.js

class App extends Component {
    render() {
        return (
            <React.Fragment>
                <Route key="start-path" path='/' render={(props) => <HomeComponent {...props} filterData='HOME' />} />
                <Route exact key="second-page" path='/react/second' render={(props) => <HomeComponent {...props} filterData='SECOND' />} />
                <Route exact key="third-page" path='/react/third' render={(props) => <HomeComponent {...props} filterData='THIRD' />} />
            </React.Fragment>
        )
    }
}

标签： javascriptreactjsamazon-s3react-routerreact-router-dom

解决方案

您的帖子根本没有真正解释您的问题，但我怀疑这可能是您的问题。

转到托管网站的 S3 存储桶，上传文件后，转到“属性”选项卡并单击“静态网站托管”选项。选择“使用此存储桶托管网站”选项并将 index.html 提供给“索引文档”和“错误文档”字段。这将确保您对 S3 的请求不会像通常那样/react/second尝试访问存储桶中的密钥。/react/second

推荐阅读