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服務器上工作

回答

相關問題