React应用无法在静态index.html文件内的AWS S3服务器上运行

Question

我有一个React Redux应用程序，在我的本地webpack-dev-server上运行良好。 但是我试图通过推动由创建的构建在s3上运行相同

"webpack --optimize-minimize --define process.env.NODE_ENV='production'"

将构建上传到S3并尝试打开index.htm后失败，并且我在dom上不断获取一个空的react元素

<div id="content" class="content">
   <!-- react-empty: 1 -->
</div>

如您所见，HTML中存在我尝试安装react（'content'）的元素。 另外，我容器div在加载app.js的标签之前（如果有任何区别）。 我也在我的React应用程序中从'react-router'使用'browserHistory'。

const store = configureStore();
    ReactDOM.render(
        <MuiThemeProvider muiTheme={muiTheme}>
            <Provider store={store}>
                <Routes />
            </Provider>
    </MuiThemeProvider>, document.getElementById('content'));

我的索引文件如下（在上传之前，我将style.css和app.js的路径更改为S3路径）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing App</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">


    <link rel="stylesheet" href="../scheduling-buildfiles/public/style.css">
</head>
<body>
<div class='header'>Header Here</div>
<div id='content' class='content'>Content Here</div>
<div class='footer'>Footer Here</div>
<script src="../scheduling-buildfiles/app.js"></script>
</body>
</html>

我的路线如下所示：

'use strict';
import React from 'react';
import { Router, Route, browserHistory, IndexRoute  } from 'react-router';
//import components here

export default class Routes extends React.Component {
  render() {
    return (
      <Router history = {browserHistory}>
        <Route path = "/" component={Main}>
          <IndexRoute component = {LoginComponent} />
                    <Route path="/addVehicle" component={AddVehicleComponent} />
                    <Route path="/selectServices" component={SelectServicesComponent}/>
                    <Route path="/findServices" component={FindServicesComponent} />
                    <Route path="/bookAppointment" component={BookAppointmentComponent}/>
                    <Route path="/myInformation" component={MyInformationComponent}/>
                    <Route path="/appointmentSummary" component={AppointmentSummaryComponent}/>
        </Route>
      </Router>
    );
  }
}

您知道问题可能是什么或如何进一步解决问题吗？ 还是如果有人有做类似事情的简单例子？ 目的是通过仅添加app.js的脚本标签和容器“ content”来启动我的应用程序，以确保我的应用程序可以在其他人的index.html上运行。

Answer 1

我想出了解决方案，如果我用hashHistory替换browserHistory，它就可以工作。

但不确定其背后的原因。 如果有人知道，请赐教。 欢迎任何解释/资源。

React应用无法在静态index.html文件内的AWS S3服务器上运行

问题描述

1 个解决方案

解决方案1
0 2017-04-20 08:41:00

React应用无法在静态index.html文件内的AWS S3服务器上运行

问题描述

1 个解决方案

解决方案1 0 2017-04-20 08:41:00

解决方案1
0 2017-04-20 08:41:00