[英]S3 bucket can't load React application with routing
所以我目前在这种情况下,我想在S3存储桶中显示我的react应用程序。 当我将应用程序部署到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
App.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>
)
}
}
您的帖子并没有真正说明您的问题,但我怀疑这可能是您的问题。
转到托管您的网站的S3存储桶,并在文件上传后转到“属性”选项卡,然后单击“静态网站托管”选项。 选择“使用此存储桶托管网站”选项,并在“索引文档”和“错误文档”字段中提供index.html。 这样可以确保您对S3的请求假设/react/second
不会像通常那样尝试访问存储桶中的/react/second
键。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.