在服務器上處理react-routes的正確方法？

我已將我的應用程序上傳到服務器並遇到問題。在服務器上處理react-routes的正確方法？

前往example.com正確顯示主頁，但是在做了類似example.com/dashboard之後，我收到一個錯誤Cannot GET /dashboard。我認爲這是因爲服務器實際上試圖獲得該路徑，但仍然需要經過index.html，因爲這是一個使用react-router的單頁應用程序。我相信我需要將所有請求重定向到index.html來完成這項工作，但我不知道如何實現這一點。我使用快遞到服務器我的文件，這是我server.js

var express = require('express'); 
var app = express(); 

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

app.listen(8080, function() { 
    console.log('Listening on port: ' + 8080); 
});

來源

2016-02-05 Ilja

你需要建立快速，這樣，如果一個請求不是一個靜態文件它屬於通過，並作爲前端的處理請通過index.html上的React應用程序路由。

添加到您上面的例子中，這樣的事情，我添加了/static路徑爲你的靜態資產

var express = require('express'); 
var app = express(); 

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

app.get('*', function (req, res, next) { 
    if (req.path.startsWith('/static')) return next() 
    res.sendFile('dist/index.html') 
}) 

app.listen(8080, function() { 
    console.log('Listening on port: ' + 8080); 
});

通知。這意味着你的應用程序對於靜態資源的每個請求都必須看起來像/static/foo.jpg（或其他）。爲了保持名稱同步，您也可以重命名dist文件夾static。

這是一個有用的模式，因爲它可以讓您輕鬆區分對靜態資產的請求和應該落入您的前端應用程序的請求。

來源

2016-02-05 15:49:24 WildService

在服務器上處理react-routes的正確方法？

回答

相關問題