React应用程序无法在静态index.html文件中的AWS S3服务器上工作

我有一个react，redux应用程序，该应用程序在我的本地webpack-dev-server上运行得非常好。但是我想通过推动创建构建由React应用程序无法在静态index.html文件中的AWS S3服务器上工作

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

上运行S3相同构建上传到S3，并试图打开index.htm失败后，我不断收到对我的DOM空反应元素

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

正如你可以看到我试图装载的元素反应（'content'）出现在HTML中。另外我的容器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> 
    ); 
    } 
}

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

来源

2017-04-20 Sahil Sharma

请提供一些关于您的应用程序，路线等的详细信息。 –

以上是否做过。 @Koen。 –

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

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

来源

2017-04-20 08:41:00

React应用程序无法在静态index.html文件中的AWS S3服务器上工作

回答

相关问题