Question

我有一个react，redux应用程序，它在我的本地webpack-dev服务器上运行良好。但我试图通过推动

创建的构建在s3上运行相同的内容

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

将构建内容上传到S3并尝试打开index.htm失败后我不断在我的dom上获得一个空的反应元素

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

正如您所见，HTML中存在我尝试安装的元素react（'content'）。另外我的容器div在标签之前加载app.js.（如果这有任何区别）。此外，我在反应应用程序中使用'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>
    );
  }
}

知道问题可能是什么或如何进一步排除故障？或者，如果有人有一个做类似事情的简单例子？目的是确保我的应用程序可以在另一个人index.html上运行，只需添加app.js的脚本标记和容器“content”即可启动我的应用程序。

Answer 1

我找到了解决方案。如果我用hashHistory替换browserHistory，它会工作。

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

在静态index.html文件中反应应用程序无法在AWS S3服务器上运行

1 个答案: