React Js前端和Express後端 - 無法正確加載靜態文件

我在前端有一個React應用程序。這裏是路線：React Js前端和Express後端 - 無法正確加載靜態文件

var React = require("react"); 
    var ReactDOM = require("react-dom"); 
    var {Route, Router, IndexRoute, browserHistory} = require("react-router"); 
    var Main = require("Main"); 
    var BlogList = require('BlogList'); 
    var Blogpost = require('Blogpost'); 
    var NewBlog = require('NewBlog'); 
    var EditBlog = require('EditBlog'); 
    var NotFound404 = require('NotFound404'); 


    ReactDOM.render( 
     <Router history={browserHistory}> 
      <Route path="/" component={Main}> 
       <IndexRoute component={BlogList} />  
       <Route path="blogs/new" component={NewBlog} />   
       <Route path="blogs/:id/edit" component={EditBlog} />       
       <Route path="blogs/:id" component={Blogpost} /> 
       <Route path='404' component={NotFound404} /> 
       <Route path='*' component={NotFound404} />   
      </Route>   
     </Router>, 

     document.getElementById("app") 
    );

，這裏是從public目錄的index.html：

<!DOCTYPE html> 
    <html> 
    <head> 
     <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>  
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">   
     <link rel="stylesheet" type="text/css" href="./stylesheets/app.css"> 
     <title>MERN Blog</title> 
    </head> 
    <body> 
     <div id="app"></div> 
     <script src="bundle.js"></script> 
    </body> 
    </html>

我的快遞後端：

app.use(express.static(__dirname + '/public')); 

..... 

//index route 
app.get("/api/blogs", function(request, response){  
... 
}); 
//show route 
app.get("/api/blogs/:id", function(request, response){  
... 
}); 

app.get('*', function (request, response){ 
    response.sendFile(path.resolve(__dirname, 'public', 'index.html')) 
});

一切工作正常，當我點擊鏈接 - 所有渲染正確。但是，當我刷新相同的頁面 - 我有空白頁。我的index.html加載了一些文件 - bundle.js等。這些請求由後端的「*」路由處理 - 並且index.html被返回。

如何使正確處理靜態文件？

來源

2016-11-30 kurumkan

嘗試把一切（像靜止圖像，CSS ...）靜態路徑...像'/靜態'，並創建一個路由，以便瀏覽器可以找到這些資源 –

是靜態文件沒有顯示或當你刷新路線它不正確顯示？ –

@BradBumbalough - 問題是 - 當我加載index.html時 - 它向我的後端請求bundle.js文件。它必須由app.use處理（express.static（__ dirname +'/ public'））;但它的處理app.get（'*'... – kurumkan

嘗試在index.html的使用絕對路徑

<!DOCTYPE html> 
<html> 

<head> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="./stylesheets/app.css"> 
    <title>MERN Blog</title> 
</head> 

<body> 
    <div id="app"></div> 
    <script src="bundle.js"></script> 
</body> 

</html>

使用相對路徑，當你像/路由/ X/Y/Z路徑刷新頁面和browserHistory出現的問題並加載index.html然後它試圖加載相對的CSS（例如）/route/x/y/z/stylesheets/app.css

當您使用絕對路徑它將你express.static處理

app.use(express.static(__dirname + '/public'));

它會加載index.html，然後嘗試加載/stylesheets/app.css將正確處理......這樣

... 
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css"> 
... 
<script src="/bundle.js"></script>

來源

2016-11-30 13:04:13

來處理我相信你有正確的解決方案！對於本地服務器目錄中的絕對路徑 –

:)但我仍然認爲把所有的/靜態是一個很好的方式來組織... –

傳統上我認爲人們使用'/ public'作爲靜態文件...無論哪種方式沒有絕對路徑，這是無關緊要的。 –

React Js前端和Express後端 - 無法正確加載靜態文件

回答

相關問題